关于使用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就可以了。其它多余的那些函数，你也别问我那是干嘛用的，反正如果没有的话，有的手机在填写表单啥的时候会给你惊喜。

 

转载于:https://www.cnblogs.com/paluano/p/6601172.html