web-dev-qa-db-ja.com

iOS：バウンススクロールを無効にするが、通常のスクロールは許可する

ユーザーがページの端に到達したときに、サイトのコンテンツが動き回らないようにします。私はそれを止めたいだけです。

私がいたるところに見かけるオムニ存在するJavaScriptソリューションはこれです：

$(document).bind(
   'touchmove',
   function(e) {
     e.preventDefault();
   }
);

ただし、これによりスクロールが完全に防止されます。バウンスを削除する方法はありますか。 JSではなくCSSまたはメタタグを使用することが望ましいですが、機能するものであれば何でもかまいません。

javascriptiosiphonecssmobile-safari
22
emersonthis

別の答えを追加する必要があります。私の最初のアプローチはうまくいくはずですが、iOSのバグがあり、e.stopPropagationであっても、ページ全体をいじっています。

mikeyUXはこのための回避策を見つけます： https://stackoverflow.com/a/16898264/2978727 なぜ彼がこの素晴らしいために数回クリックするだけなのか疑問に思いますアイディア...

これは私の場合に彼のアプローチをどのように使用したかです：

var content = document.getElementById('scrollDiv');
content.addEventListener('touchstart', function(event) {
    this.allowUp = (this.scrollTop > 0);
    this.allowDown = (this.scrollTop < this.scrollHeight - this.clientHeight);
    this.slideBeginY = event.pageY;
});

content.addEventListener('touchmove', function(event) {
    var up = (event.pageY > this.slideBeginY);
    var down = (event.pageY < this.slideBeginY);
    this.slideBeginY = event.pageY;
    if ((up && this.allowUp) || (down && this.allowDown)) {
        event.stopPropagation();
    }
    else {
        event.preventDefault();
    }
});
19
Michael P

文書のデフォルトの動作を防ぐことにより、バウンスを無効にします。

document.addEventListener("touchmove", function(event){
    event.preventDefault();
});

タッチがドキュメントレベルに到達しないようにすることでスクロールを許可します（スクロールを防止する場所）。

var scrollingDiv = document.getElementById('scrollDiv');
scrollingDiv.addEventListener('touchmove', function(event){
    event.stopPropagation();
});

これら2つの違いに注意してください。

event.stopPropagation()
event.preventDefault()

ここでStopPropagationを選択する必要があります。非常に良い説明があります： http://davidwalsh.name/javascript-events

編集：同じ問題、同じ解決策： document.ontouchmoveとiOS 5でのスクロール

Edit2：メソッドの後に括弧を追加した変数名のタイプミスを修正

12
Michael P

ここで見つけたさまざまなアプローチをstackoverflowで試しましたが、iNoBounceは私にとって本当にうまくいったものでした： https://github.com/lazd/iNoBounce

Index.htmlに追加しました。

<script src="inobounce.js"></script>
2
Omer Leshem

このライブラリ は私のシナリオのソリューションです。ライブラリをインクルードし、これらのようにしたい場所を初期化するだけの簡単な使用方法。

noBounce.init({   
    animate: true
});

ページ全体ではなく1つの要素のみでバウンスを防止する場合は、次のようにできます。

 noBounce.init({
    animate: true,
    element: document.getElementById("content")
  });
2
Nezir Yürekli

Desktop Browserに適用する場合、JavaScriptコードは必要ありません。CSSコードは数行だけです：

html {
    height  : 100%;
    overflow: hidden;
}
body {
    height  : 100%;
    overflow: auto;
}
1
RoberMac

私に役立ったコードを見つけた、私はそれがあなたに役立つと信じています。

ソリューションはここに書かれています： http://apdevblog.com/optimizing-webkit-overflow-scrolling/

基本的に、次のjsコードが必要です。

    document.addEventListener("DOMContentLoaded", ready, false);
    document.addEventListener("touchmove", function (evt)
    {
        evt.preventDefault();
    }, false);

    function ready()
    {
        var container = document.getElementsByClassName("scrollable")[0];
        var subcontainer = container.children[0];
        var subsubcontainer = container.children[0].children[0];

        container.addEventListener("touchmove", function (evt)
        {
            if (subsubcontainer.getBoundingClientRect().height > subcontainer.getBoundingClientRect().height)
            {
                evt.stopPropagation();
            }
        }, false);
    }

そして、スクロール可能なdivにclass = "scrollable"を設定します。

0
Cesar

これらの提案を試し、いくつかの記事を読んだ後、CSSプロパティ<overflow-x：hidden;を使用しました。 >問題のある要素/コンテナについて。

0
Chev Dev