javascript - iScroll 在触摸事件结束时返回顶部

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 的加载方式来修复奇怪的行为，例如橡皮筋效果。我已经按照说明更改了加载，但当我放手时，我仍然会用橡皮筋将滚动区域弹回顶部。

Sometimes the DOMContentLoaded is a bit hasty and get fired when the contents are not ready. If you slip into some weird behaviors (eg: rubber band effect), try the following:

<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);