2

我有一个 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>
4

2 回答 2

1

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

display:none;

或使用 jQuery 隐藏滚动条

$("x").hide();

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

setTimeout(function () { myScroll.refresh(); }, 0);
于 2013-06-05T15:05:04.183 回答
0

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

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

setTimeout(function () { myScroll.refresh(); }, 0);
于 2013-03-02T10:57:39.337 回答