關於使用Iscroll.js異步加載數據後不能滑動到最底端的問題解決方案

關於使用Iscroll.js異步加載數據後不能滑動到最底端，拉到最下邊又彈回去的問題困擾了我老半天，相信不少朋友都遇到了。我恰好不當心解決了，和你們分享一下。因爲各類忙，下邊就直接上代碼吧。

（前提是你定義的iscroll.js正常狀況下已經能使頁面滑動，這個我就無論了）

html關鍵代碼：

<div class="middle" id="wrapper">

　　<div id="scroller">

　　　　^^^^^^^^^^這裏是你的要加載的數據內容，本身完成（異步加載）。

　　</div>

</div>

JS代碼：

<script type="text/javascript" src="~/Scripts/jquery.min.js"></script>

<script type="application/javascript" src="~/Scripts/iscroll.js"></script>

<script type="text/javascript">

var myscroll;
function loaded() {
    myScroll = new iScroll('wrapper', {
        fixedScrollbar: true, hideScrollbar: true, fadeScrollbar: true, mouseWheel: true, snap: true,
        onBeforeScrollStart: function (e) {
            var target = e.target;
            while (target.nodeType != 1) target = target.parentNode;
            if (target.tagName != 'SELECT' && target.tagName != 'INPUT' && target.tagName != 'TEXTAREA') {
                e.preventDefault();
            }
        },
        onBeforeScrollMove: function (e) {
            e.preventDefault();
        },
        onScrollEnd: function (e) {
            var resultH = $("#wrapper").height();
            $("#wrapper").css("height", resultH);
            setTimeout(function () {
                myScroll.refresh();
                myScroll.options.snap = true;
            }, 100);
        }
    },120);
}

window.addEventListener("load", loaded, true);
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, true);
document.addEventListener('DOMContentLoaded', allowFormsInIscroll, false);

function allowFormsInIscroll() {
    [].slice.call(document.querySelectorAll('input, select, button')).forEach(function (el) {
        el.addEventListener(('ontouchstart' in window) ? 'touchstart' : 'mousedown', function (e) {
            e.stopPropagation();
        })
    })
}

</script>

 

原理不外乎加載完了後，從新計算一下高度，而後刷新Iscroll就能夠了。其它多餘的那些函數，你也別問我那是幹嗎用的，反正若是沒有的話，有的手機在填寫表單啥的時候會給你驚喜。