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