web-dev-qa-db-ja.com

Safariでエラスティックスクロールを無効にする

Safari（OSX Lion）で弾性スクロール/バウンス効果を無効化にしたかっただけです。

Cssのbodyにoverflow: hiddenを設定するソリューションを見つけましたが、予想どおりスクロールバーを無効にするなので、ウェブサイトが画面よりも「長い」場合はwon 'スクロールできる!

解決策やヒントは大歓迎です！ありがとう！

javascriptjquerycsssafariosx-lion
42
Fabian Pirklbauer

次のCSSを適用することにより、これをより普遍的に実現できます。

html,
body {
  height: 100%;
  width: 100%;
  overflow: auto;
}

これにより、コンテンツは何であれbody内でスクロール可能になりますが、scrollイベントが発生するスクロールコンテキストはdocument.body、windowではありません。

57
Aintaer

overflow:hidden要素で<body>ハックを使用して、通常のスクロール動作を取り戻す場合、<div>を要素内に完全に配置して、overflow:autoで元に戻すことができます。 。これが最良のオプションだと思うし、cssだけを使用して実装するのは非常に簡単だ！

または、jQueryを試すことができます。

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

Javasrciptでも同じ：

document.addEventListener(
'touchmove',
function(e) {
e.preventDefault();
},
false
);

最後のオプション、 ipad safari：スクロールを無効にし、エフェクトをバウンスしますか？

14
Yisela

overflow:hidden;-webkit-overflow-scrolling:touchは、固定ヘッダーが表示領域外になるため、iOS safari 8.1ではうまく機能しません。

gif

@Yiselaが言うように、CSSは.container（<div>の下の<body>）に配置する必要があります。これは問題ないようです（iOS 8.1のサファリのリーで）

gif

ブログにデモを掲載しました： http://tech.colla.me/en/show/disable_elastic_scroll_on_iOS_safari

11
sunderls

IPadで解決しました。 OSXでも動作する場合は試してください。

body, html { position: fixed; }

コンテンツが画面よりも小さいか、レイアウトフレームワーク（私の場合は角形素材）を使用している場合にのみ機能します。

Angularマテリアル、ページ全体のオーバースクロール効果を無効にするのは素晴らしいことですが、内部セクションは<md-content>は引き続きスクロール可能です。

10
Martin

すべてのサイトで無効にする拡張機能を作成しました。その際、3つの手法を使用しました。純粋なCSS、純粋なJS、およびハイブリッドです。

CSSバージョンは上記のソリューションに似ています。 JSは次のようになります。

var scroll = function(e) {
    // compute state
    if (stopScrollX || stopScrollY) {
        e.preventDefault();              // this one is the key
        e.stopPropagation();
        window.scroll(scrollToX, scrollToY);
    }
}

document.addEventListener('mousewheel', scroll, false);

CSSは、position：fixed要素を使用しているときに機能し、ブラウザにスクロールを行わせます。 JSが必要なのは、他のJSがウィンドウ（イベントなど）に依存していて、以前のCSSによってブロックされる場合（ウィンドウの代わりに本文がスクロールするため）、エッジでイベントの伝播を停止することで動作しますが、非Edgeコンポーネントのスクロールを合成します。欠点は、いくつかの種類のスクロールが発生しないことです（CSSで機能します）。ハイブリッドの1つは、スクロールがエッジ（JS）に達したときに方向オーバーフロー（CSS）を選択的に無効にすることで混合アプローチを試みますが、理論的には両方のケースで機能しますが、現在のところ、ある程度の余裕があるためまったく機能していません。

そのため、Webサイトの実装に応じて、いずれかのアプローチをとる必要があります。

詳細が必要な場合は、こちらを参照してください： https://github.com/lloeki/unelastic

5
Lloeki

スクロールオフセットが境界内にあるかどうかを確認できます。超えた場合は、元に戻します。

var scrollX = 0;
var scrollY = 0;
var scrollMinX = 0;
var scrollMinY = 0;
var scrollMaxX = document.body.scrollWidth - window.innerWidth;
var scrollMaxY = document.body.scrollHeight - window.innerHeight;

// make sure that we work with the correct dimensions
window.addEventListener('resize', function () {
  scrollMaxX = document.body.scrollWidth - window.innerWidth;
  scrollMaxY = document.body.scrollHeight - window.innerHeight;
}, false);

// where the magic happens
window.addEventListener('scroll', function () {
  scrollX = window.scrollX;
  scrollY = window.scrollY;

  if (scrollX <= scrollMinX) scrollTo(scrollMinX, window.scrollY);
  if (scrollX >= scrollMaxX) scrollTo(scrollMaxX, window.scrollY);

  if (scrollY <= scrollMinY) scrollTo(window.scrollX, scrollMinY);
  if (scrollY >= scrollMaxY) scrollTo(window.scrollX, scrollMaxY);
}, false);

http://jsfiddle.net/yckart/3YnUM/

3
yckart

「オーバーフロー」ソリューションはどれもうまくいきませんでした。 jQueryを使用してJavaScriptで視差効果をコーディングしています。 ChromeおよびOSX上のSafariでは、実際にドキュメントの高さを超えてスクロールし、ウィンドウ変数を境界外の番号で更新するため、伸縮/ゴムバンド効果がスクロール番号を混乱させていました。私がしなければならなかったのは、スクロールされた量が実際のドキュメントの高さよりも大きいかどうかを確認することでした：

$(window).scroll(
    function() {
        if ($(window).scrollTop() + $(window).height() > $(document).height()) return;
        updateScroll(); // my own function to do my parallaxing stuff
    }
);
3
Gavin

上記のソリューションはどれもうまくいきませんでしたが、代わりにコンテンツをdivにラップし（＃outer-wrap）、次のCSSを使用しました：

body {
   overflow: hidden;
}
#outer-wrap {
    -webkit-overflow-scrolling: touch;
     height: 100vh;
     overflow: auto;
}

もちろん、もちろんビューポートの幅/高さをサポートするブラウザでのみ機能します。

2
Owen Davey

上記のCSSソリューションが機能しない状況がいくつかあります。たとえば、同じページ上の透明な固定ヘッダーとスティッキーフッター。サファリでトップバウンスが発生し、フルスクリーンスライダーでフラッシュが発生するのを防ぐために、これを使用できます。

    if (navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1) {

        $window.bind('mousewheel', function(e) {

            if (e.originalEvent.wheelDelta / 120 > 0) {

                if ($window.scrollTop() < 2) return false;
            } 
        });

    }
1
Kieran