2

スクロールに関して非常に難しいことが証明されている iOS Web アプリを持っています。問題を解決するために私がやってきたのは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>
4

2 に答える 2