关于使用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就可以了。其它多余的那些函数,你也别问我那是干嘛用的,反正如果没有的话,有的手机在填写表单啥的时候会给你惊喜。
最新文章
- 手游录屏直播技术详解 | 直播 SDK 性能优化实践
- Nginx-搭建https服务器
- windows程序设计读书笔记2——字符显示1
- python开发的一些tips
- 刚开始学HTML自己做的,求大神些多多指教。
- POJ 2418 Hardwood Species( AVL-Tree )
- PHP执行系统外部命令函数:exec()、passthru()、system()、shell_exec()
- CultureInfo中重要的InvariantCulture
- 关于sys.argv
- Spring MVC的优势
- JavaScript的屏幕对象
- jQuery滚动指定位置
- UNIX网络编程——线程池模式比较(ICE线程池模型和L/F领导者跟随者模式)
- Niop2017初赛滚粗记
- js 遍历数组
- 再见VB6!再见程序生涯!
- 腾讯地图打开地图选取位置 withMap
- C和C指针小记(十五)-结构和联合
- 编译wiredtiger rpm包
- Linux内核第八节 20135332武西垚
热门文章
- 基于KVM的qemu中宿主机和虚拟机间的通信
- Alluxio/Tachyon如何发挥lineage的作用?
- 2018.10.20 loj#2593. 「NOIP2010」乌龟棋(多维dp)
- 2018.09.26 bzoj4326: NOIP2015 运输计划(二分+树上差分)
- 2018.09.08 AtCoder Beginner Contest 109简要题解
- 2018.08.19 NOIP模拟 change(简单模拟)
- 44 The shopping psychology 购物心理
- [MySQL]变更数据库字符集
- 记录一次shell里局部变量的问题
- linux导出Excel The maximum column width for an individual cell is 255 characters