关于使用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就可以了。其它多余的那些函数,你也别问我那是干嘛用的,反正如果没有的话,有的手机在填写表单啥的时候会给你惊喜。
关于使用Iscroll.js异步加载数据后不能滑动到最底端的问题解决方案的更多相关文章
- iScroll.js 向上滑动异步加载数据回弹问题
iScroll是一款用于移动设备web开发的一款插件.像缩放.下拉刷新.滑动切换等移动应用上常见的一些效果都可以轻松实现. 现在最新版本是5.X,官网这里:http://iscrolljs.com/ ...
- 新手教程:不写JS,在MIP页中实现异步加载数据
从需求谈起:在 MIP 页中异步加载数据 MIP(移动网页加速器) 的 加速原理 除了靠谱的 MIP-Cache CDN 加速外,最值得一提的就是组件系统.所有 JS 交互都需要使用 MIP 组件实现 ...
- highcharts.js两种数据绑定方式和异步加载数据的使用
一,我们先来看看异步加载数据的写法(这是使用MVC的例子) 1>js写法 <script src="~/Scripts/jquery-2.1.4.min.js"> ...
- 淘宝购物车页面 智能搜索框Ajax异步加载数据
如果有朋友对本篇文章的一些知识点不了解的话,可以先阅读此篇文章.在这篇文章中,我大概介绍了一下构建淘宝购物车页面需要的基础知识. 这篇文章主要探讨的是智能搜索框Ajax异步加载数据.jQuery的社区 ...
- Jquery zTree结合Asp.net实现异步加载数据
zTree结合Asp.net实现异步加载数据 实现简单操作 zTree 下载 api 访问 :http://www.ztree.me/v3/main.php 例子中用到json数据转化 newtons ...
- Highcharts 异步加载数据曲线图表
导入 data.js 文件 异步加载数据需要引入以下js 文件: <script src="http://code.highcharts.com/modules/data.js&quo ...
- 转:web前端面试题合集 (Javascript相关)(js异步加载详解)
1. HTTP协议的状态消息都有哪些? 1**:请求收到,继续处理2**:操作成功收到,分析.接受3**:完成此请求必须进一步处理4**:请求包含一个错误语法或不能完成5**:服务器执行一个完全有效请 ...
- [Ext.Net]TreePanel 异步加载数据
异步加载数据指的是页面加载的时候只显示根目录,点击根目录再去加载其子目录. 下面就来介绍下这种异步加载的树结构要怎么实现 现将例子的图 QQ图片20131225134353.jpg (12.1 KB, ...
- Highcharts 基本曲线图;Highcharts 带有数据标签曲线图表;Highcharts 异步加载数据曲线图表
Highcharts 基本曲线图 实例 文件名:highcharts_line_basic.htm <html> <head> <meta charset="U ...
随机推荐
- geoserver 开发2
先上源码下载 上一章我们介绍了GeoServer源码分析的必要性(这个就见仁见智了)以及诸项准备工作,并且在最后还给出了OWS请求处理流程的伪代码. 这一章我们来看看要注册自己的服务需要做哪些工作.假 ...
- 06 Maven 聚合和继承
Maven 聚合和继承 1. 聚合 2. 继承 <parent> <groupId>org.apache.karaf.demos</groupId> <art ...
- dateframe_loc.iloc.ix
import pandas as pddf=pd.DataFrame({ "a":[1,2,3], "b":[4,5,6], "c":[7, ...
- MAC安装远程工具Securecrt的破解方式(详细有图)
想要实现mac的远程连接功能,本来想使用终端的,但是终端的很多功能是欠佳的,所以决定安装一款,像windows的xshell一样好的软件,所以选择了这款Securecrt. 首先准备两个东西,一个是S ...
- UVa 11280 Flying to Fredericton (DP + Dijkstra)
题意:给出n(2<=n<=100)个城市之间的m(0<=m<=1000)条航线以及对应的机票价格,要求回答一些询问,每个询问是给出最大停留次数S,求从其实城市Calgary到终 ...
- Java 增强 for 循环
Java 增强 for 循环 Java5 引入了一种主要用于数组的增强型 for 循环. Java 增强 for 循环语法格式如下: for(声明语句 : 表达式) { //代码句子 } 声明语句:声 ...
- NATAPP打穿内网
前一篇博文写了ngrok作为内网穿透工具现在开始开始学习另外一种内 网穿透natapp(他也是基于ngrok的一种高速内网穿透服务)多的介绍就 不说了,开始进入正题. 第一步:先登录natapp官网( ...
- 7.计算N元等式[穷举]
穷举的一种应用,计算x+2y+3z=50的非负整数解.先约束每个变量的最大值,x=50,y=25,z=50/3. #include <iostream> using namespace s ...
- (转)Entity Framework Extended Library (EF扩展类库,支持批量更新、删除、合并多个查询等)
转自:http://www.cnblogs.com/jinzhao/archive/2013/05/31/3108755.html 今天乍一看,园子里居然没有关于这个类库的文章,实在是意外毕竟已经有很 ...
- MySQL性能调优与架构设计——第12章 可扩展设计的基本原则
第12章 可扩展设计的基本原则 前言: 随着信息量的飞速增加,硬件设备的发展已经慢慢的无法跟上应用系统对处理能力的要求了.此时,我们如何来解决系统对性能的要求?只有一个办法,那就是通过改造系统的架构体 ...