关于使用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异步加载数据后不能滑动到最底端的问题解决方案的更多相关文章

  1. iScroll.js 向上滑动异步加载数据回弹问题

    iScroll是一款用于移动设备web开发的一款插件.像缩放.下拉刷新.滑动切换等移动应用上常见的一些效果都可以轻松实现. 现在最新版本是5.X,官网这里:http://iscrolljs.com/ ...

  2. 新手教程:不写JS,在MIP页中实现异步加载数据

    从需求谈起:在 MIP 页中异步加载数据 MIP(移动网页加速器) 的 加速原理 除了靠谱的 MIP-Cache CDN 加速外,最值得一提的就是组件系统.所有 JS 交互都需要使用 MIP 组件实现 ...

  3. highcharts.js两种数据绑定方式和异步加载数据的使用

    一,我们先来看看异步加载数据的写法(这是使用MVC的例子) 1>js写法 <script src="~/Scripts/jquery-2.1.4.min.js"> ...

  4. 淘宝购物车页面 智能搜索框Ajax异步加载数据

    如果有朋友对本篇文章的一些知识点不了解的话,可以先阅读此篇文章.在这篇文章中,我大概介绍了一下构建淘宝购物车页面需要的基础知识. 这篇文章主要探讨的是智能搜索框Ajax异步加载数据.jQuery的社区 ...

  5. Jquery zTree结合Asp.net实现异步加载数据

    zTree结合Asp.net实现异步加载数据 实现简单操作 zTree 下载 api 访问 :http://www.ztree.me/v3/main.php 例子中用到json数据转化 newtons ...

  6. Highcharts 异步加载数据曲线图表

    导入 data.js 文件 异步加载数据需要引入以下js 文件: <script src="http://code.highcharts.com/modules/data.js&quo ...

  7. 转:web前端面试题合集 (Javascript相关)(js异步加载详解)

    1. HTTP协议的状态消息都有哪些? 1**:请求收到,继续处理2**:操作成功收到,分析.接受3**:完成此请求必须进一步处理4**:请求包含一个错误语法或不能完成5**:服务器执行一个完全有效请 ...

  8. [Ext.Net]TreePanel 异步加载数据

    异步加载数据指的是页面加载的时候只显示根目录,点击根目录再去加载其子目录. 下面就来介绍下这种异步加载的树结构要怎么实现 现将例子的图 QQ图片20131225134353.jpg (12.1 KB, ...

  9. Highcharts 基本曲线图;Highcharts 带有数据标签曲线图表;Highcharts 异步加载数据曲线图表

    Highcharts 基本曲线图 实例 文件名:highcharts_line_basic.htm <html> <head> <meta charset="U ...

随机推荐

  1. 一篇文章Tornado快速入门

    Tornado是一个PythonWeb框架.一个异步网络库.通过使用非阻塞网络I/O,Tornado能够处理数以千计的连接,这意味着对于实时Web服务来说,Tornado是一个理想的Web框架. 作为 ...

  2. efcore 级联删除

    https://docs.microsoft.com/en-us/ef/core/saving/cascade-delete#required-relationships Optional relat ...

  3. sublime3 多行编辑.摘抄

    Sublime text 3是一个非常强大的网站编辑工具. 这里小云深深的被它的快速编辑多行内容功能所吸引. 先说下,使用下面的功能要安装一个叫emmet的插件.没有的话,自行度娘吧. 下面就来看下具 ...

  4. 2018.08.20 bzoj1143: [CTSC2008]祭祀river(最长反链)

    传送门 一道简单的求最长反链. 反链简单来说就是一个点集,里面任选两个点u,v都保证从u出发到不了v且v出发到不了u. 链简单来说就是一个点集,里面任选两个点u,v都保证从u出发可以到达v或者v出发可 ...

  5. 将IP地址转化为整数

    $ip = 'IP地址';echo $intip = sprintf('%u',ip2long($ip)); //转换为无符号整型echo long2ip($intip);//将整型转换为ip

  6. 【Unity】2.4 层次视图(Hierarchy)

    分类:Unity.C#.VS2015 创建日期:2016-03-29 一.简介 层级视图 (Hierarchy) 包含当前场景中的每个游戏对象 (GameObject).有些是三维模型等资源文件的直接 ...

  7. Linux下一个简单sniffer的实现

    Sniffer(嗅探器)是一种基于被动侦听原理的网络分析方式.将网络接口设置在监听模式,便可以将网上传输的源源不断的信息截获.对于网络监听的基本原理我们不在赘述,我们也不开启网卡的混杂模式,因为现在的 ...

  8. struts2从浅至深(六)总结

    在我认为strust2的作用就是 1.主要跟前端交互的框架数据提交先经过struts 2.起到对数据的过滤,接受数据 3.把数据显示到前段,具有很成熟的ognl技术,用起来特别方便 4.还提供了跟前段 ...

  9. What is Pay Me to Learn——Google Summer of Code 2013

    原文链接:http://zhchbin.github.io/2013/10/17/what-is-pay-me-to-learn/ 背景 今天早上才想起来,自己还欠着一件事情没有做完.很久在人人上之前 ...

  10. HTTP的瓶颈

    http协议,1.0或1.1版本,一个连接智能发送一个请求,通信都是基于请求/响应方式的,请求只能从客户端发起(半双工),发送冗长的首部. 在交互比较频繁的社交网站等,一直轮训带来的网络及服务器压力是 ...