Question

我有一个iOS网络应用程序，在滚动方面证明是非常困难的！解决问题的关闭是iScroll 4.然而，当我从屏幕上移开手指时，滚动部分似乎又回到原来的位置。

有人对这可能是什么以及如何解决它有任何想法？

剧本：

<script>
        var myScroll;
        function loaded() {
            myScroll = new iScroll('wrapper');
        }

        document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

        /* * * * * * * *
         *
         * Use this for high compatibility (iDevice + Android)
         *
         */
        document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false)

</script>

HTML：

<div id="wrapper"
         style="position:absolute;
         width:600px;
         overflow:auto;
         height: 500px;">

        <div id="scroll-content"
             style="position:absolute;
             width:600px;
             padding:0;
             height: 500px;">

              // The text that needs to be scrolled

        </div>
</div>

更新：下面说明橡皮筋效应等奇怪的行为应该通过改变iScroll的加载方式来解决。我按照说明更改了装载，但是当我放手时，我仍然会将滚动区域的橡皮筋带回顶部。

有时候，DOMContentLoaded有点仓促，并且会被解雇内容尚未准备好。如果你陷入一些奇怪的行为（例如：橡皮筋效应），请尝试以下方法：

<script type="application/javascript" src="iscroll.js"></script>
<script type="text/javascript"> var myScroll; function loaded() {
    setTimeout(function () {        myScroll = new iScroll('wrapper');  },
 100); } window.addEventListener('load', loaded, false); </script>

Answer 1

迟到的回复，但将来可能会帮助别人。我遇到的另一个非常常见的问题是，如果你有

display:none;

或使用jQuery隐藏滚动条

$("x").hide();

iScroll无法正常工作，然后必须调用.refresh（）方法才能在滚动条可见时解决此问题。

setTimeout(function () { myScroll.refresh(); }, 0);

Answer 2

好的希望这会节省一些时间。问题来自iscroll不知道可滚动区域的高度。这似乎有很多原因，但在我的情况下，由于在DOM加载后发生了一些ajax调用。

解决方案是在显示可滚动区域之前刷新iscroll var。

setTimeout(function () { myScroll.refresh(); }, 0);

触摸事件结束时，iScroll返回顶部

2 个答案: