5

Chrome と Safari の両方で OS X で発生するエラスティック スクロールを防止する方法を探しています。

意味がわからない場合は、ページが一番上にあるときに上にスクロールするか、ページが一番下にあるときに下にスクロールすると、ページの後ろに灰色の背景が表示されます。

またはに追加overflow:hiddenするだけの単一ページアプリ用のcssソリューションがありますhtmlbody

ただし、スクロールできる必要があります。

私はJavascript（JQuery）を使用して解決策を考え出しましたが、それはスクロールが一番上を通過するためのものであり、クロムでのみ機能します。また、Safari では少しバグがあります。

$(window).on('scroll', function(e){
   scrollAmount = $(this).scrollTop();
   if(scrollAmount < 1){
      $(this).scrollTop(1);
   }
});

つまり、ユーザーのスクロールが 1 未満であることを確認しているだけです。つまり、ページが終了する場所を超えて上にスクロールしようとしています。0 を試しましたが、うまくいきませんでした。ユーザーのスクロールがページの下部を通過したかどうかを確認する方法を見つけることができませんでした。

それで、何か考えはありますか？

編集：

$(window).on('scroll', function(e){
   scrollAmount = $(this).scrollTop();
   if(scrollAmount < 1){
      $(this).scrollTop(1);
   }
   if(scrollAmount > $(document).height() - $(window).height()){
      $(this).scrollTop($(window).height());
   }
});

これで、スクロールがページの下部を通過したかどうかのチェックを追加しました。ただし、この方法は機能していません。非常に不自然に跳ね返っています。

4

3 に答える 3

7

一番上まですばやくスクロールすると、エラスティック ブラウザにより、スクロール トップがマイナスになります。st <= 0 を使用すると、これが発生したときにアクションが実行されないことが保証されます。

$(window).on('scroll',function(){
    var dh = $(document).height(),
        wh = $(window).height(),
        st = $(window).scrollTop();
    if (st <= 0) {
        $(this).scrollTop(0);
    } else if (st + wh >= dh) {
        $(this).scrollTop(dh);
    }
});
于 2013-10-01T17:42:17.177 に答える
0

私は方法論が嫌いですが、jQuery を使用してドキュメントの高さを取得できます (したがって、スクロール距離のページの下部$(document).height();)

<div id="preventScroll"></div>別の方法は、プロパティを使用して、ページ全体をラッパーでラップすることですoverflow: scroll; height: 100%; width: 100%;

それは別のスクロールデバイスになり、問題全体を防ぎます。

于 2013-02-21T03:02:21.787 に答える