125

Chrome for Macでは、下のスクリーンショットに示すように、iPadやiPhoneと同様に、ページを「オーバースクロール」して「背後にあるもの」を確認できます。

Gmailや「新しいタブ」ページなど、一部のページで無効になっていることに気付きました。

「オーバースクロール」を無効にするにはどうすればよいですか？「オーバースクロール」を制御する他の方法はありますか？

ここに画像の説明を入力してください

4

8 に答える 8

183

受け入れられた解決策は私のために働いていませんでした。スクロールできる状態で動作させる唯一の方法は次のとおりです。

html {
    overflow: hidden;
    height: 100%;
}

body {
    height: 100%;
    overflow: auto;
}
于 2013-07-27T16:07:09.143 に答える
94

Chrome 63以降、Firefox 59以降、Opera 50以降では、CSSでこれを行うことができます。

body {
  overscroll-behavior-y: none;
}

これにより、質問のスクリーンショットに示されているiOSのラバーバンディング効果が無効になります。ただし、プルトゥリフレッシュ、グロー効果、スクロールチェーンも無効になります。

ただし、オーバースクロール時に独自の効果または機能を実装することを選択できます。たとえば、ページをぼかして、きちんとしたアニメーションを追加したい場合は、次のようにします。

<style>
  body.refreshing #inbox {
    filter: blur(1px);
    touch-action: none; /* prevent scrolling */
  }
  body.refreshing .refresher {
    transform: translate3d(0,150%,0) scale(1);
    z-index: 1;
  }
  .refresher {
    --refresh-width: 55px;
    pointer-events: none;
    width: var(--refresh-width);
    height: var(--refresh-width);
    border-radius: 50%; 
    position: absolute;
    transition: all 300ms cubic-bezier(0,0,0.2,1);
    will-change: transform, opacity;
    ...
  }
</style>

<div class="refresher">
  <div class="loading-bar"></div>
  <div class="loading-bar"></div>
  <div class="loading-bar"></div>
  <div class="loading-bar"></div>
</div>

<section id="inbox"><!-- msgs --></section>

<script>
  let _startY;
  const inbox = document.querySelector('#inbox');

  inbox.addEventListener('touchstart', e => {
    _startY = e.touches[0].pageY;
  }, {passive: true});

  inbox.addEventListener('touchmove', e => {
    const y = e.touches[0].pageY;
    // Activate custom pull-to-refresh effects when at the top of the container
    // and user is scrolling up.
    if (document.scrollingElement.scrollTop === 0 && y > _startY &&
        !document.body.classList.contains('refreshing')) {
      // refresh inbox.
    }
  }, {passive: true});
</script>

ブラウザのサポート

この記事の執筆時点では、Chrome 63以降、Firefox59以降​​およびOpera50以降がサポートしています。Safariは不明ですが、Edgeはこれを公にサポートしていました。ここで進捗状況と現在のブラウザの互換性をMDNドキュメントで追跡します

詳しくは

于 2017-12-07T02:09:50.300 に答える
40

これを防ぐ1つの方法は、次のCSSを使用することです。

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

body > div {
    height: 100%;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
}

このようにして、本文がオーバーフローすることはなく、ページの上下をスクロールするときに「バウンス」することはありません。コンテナはそのコンテンツを完全にスクロールします。これはSafariとChromeで機能します。

編集

<div>ラッパーとしての追加要素が役立つ理由：
Florian Feldhausのソリューションは、使用するコードがわずかに少なく、正常に機能します。ただし、ビューポートの幅を超えるコンテンツに関しては、少し癖がある場合があります。この場合、ウィンドウの下部にあるスクロールバーがビューポートの途中から移動し、認識/到達が困難になります。body { margin: 0; }これは、適切な場合に使用して回避できます。このCSSを追加できない状況では、スクロールバーが常に完全に表示されるため、ラッパー要素が役立ちます。

以下のスクリーンショットを見つけてください。 ここに画像の説明を入力してください

于 2012-08-20T23:11:17.200 に答える
2

この方法を試してください

body {
    height: 100vh;
    background-size: cover;
    overflow: hidden;
}
于 2016-06-04T13:45:36.037 に答える
2

このコードを使用して、touchmove事前定義されたアクションを削除できます。

document.body.addEventListener('touchmove', function(event) {
  console.log(event.source);
  //if (event.source == document.body)
    event.preventDefault();
}, false);
于 2016-07-27T14:57:51.447 に答える
2 
html,body {
    width: 100%;
    height: 100%;
}
body {
    position: fixed;
    overflow: hidden;
}
于 2017-12-10T18:22:25.200 に答える
0

position: absolute私のために働きます。私はChrome 50.0.2661.75 (64-bit)OSXでテストしました。

body {
  overflow: hidden;
}

// position is important
#element {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
}
于 2016-04-29T14:35:20.347 に答える
0

ウェブページの高さがに等しい場合を除いて、バウンス効果を無効にすることはできませんwindow.innerHeight。サブ要素をスクロールさせることができます。

html {
    overflow: hidden;
}
于 2017-11-19T16:11:35.107 に答える