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

【问题标题】：iScroll returns to top when touch event ends触摸事件结束时 iScroll 返回顶部
【发布时间】：2013-06-05 23:05:04
【问题描述】：

我有一个 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 的加载方式来修复橡皮筋效应等奇怪行为。我已经按照说明更改了加载，但是当我放手时，我仍然让橡皮筋将滚动区域 ping 回顶部。

有时 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>

【问题讨论】：

标签： javascript ios6 scroll iscroll

【解决方案1】：

回复较晚，但将来可能对其他人有所帮助。我遇到的另一个真正常见的问题是，如果你有

display:none;

或者使用jQuery隐藏滚动条

$("x").hide();

iScroll 无法正常工作，您必须在使滚动条可见时调用 .refresh() 方法来解决此问题。

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：