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

  • 相关阅读:
    VS2005快捷键(转)
    codeSmish使用《转》
    WinForm TextBox数据绑定
    NetTiers抛出"Unable To Load NetTiersServiceSection“的异常
    DELPHi第三方控件使用方法(摘录)
    遠程連接操作
    不同服务器数据库之间的数据操作
    delphi 关闭 MDI 子窗体
    VSS使用手册(转)
    delphi 快捷键
  • 原文地址:https://www.cnblogs.com/paluano/p/6601172.html
Copyright © 2011-2022 走看看