Web ページのオーバースクロールを防ぐにはどうすればよいですか?

Web ページのオーバースクロールの防止

「オーバースクロール」は、ユーザーが Web ページの最後を超えてスクロールできるようにする最新のブラウザーの機能です。 、根底にある内容が垣間見えます。この効果は一部のシナリオでは便利ですが、他のシナリオでは迷惑または混乱を招く可能性もあります。

Web ページのオーバースクロールを無効にしたい場合は、主に 2 つの方法があります:

方法 1: オーバースクロールを完全に無効にする

リンク先のフォーラム スレッドで提案された承認された解決策は、すべてのユーザーに対して機能するわけではありません。ただし、より信頼性の高い方法は、次の CSS ルールを使用することです:

<code class="css">html {
    overflow: hidden;
    height: 100%;
}

body {
    height: 100%;
    overflow: auto;
}</code>

このコードは、ブラウザ ウィンドウ内でオーバーフローするコンテンツを制限することでオーバースクロールを防ぎます。 HTML 要素の overflow プロパティを hidden に設定し、スクロールバーの範囲を超えたコンテンツを非表示にします。 body 要素の overflow プロパティは auto に設定されており、ページ自体内での垂直スクロールは許可されますが、ブラウザ ウィンドウを超えて広がることはできません。

方法 2: 特定の要素のオーバースクロールを制御する

ページ上の特定の要素のオーバースクロールのみを無効にしたい場合は、-webkit-overflow-scrolling プロパティを使用できます。このプロパティは、Chrome、Safari、および WebKit レンダリング エンジンを使用するその他のブラウザでサポートされています。

<code class="css">.my-container {
    -webkit-overflow-scrolling: touch;
}</code>

-webkit-overflow-scrolling を touch に設定すると、要素自体のオーバースクロールが防止され、ユーザーが要素内でスムーズにスクロールできるようになります。その特定のコンテナですが、その境界を越えることはありません。

以上がWeb ページのオーバースクロールを防ぐにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。