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

相关推荐