Web ページの「オーバースクロール」を克服する

Chrome for Mac では、「オーバースクロール」は、ユーザーが通常の表示領域を超えてページをドラッグすることを可能にする望ましくない効果です。提供された画像に見られるように。この問題に対処し、ユーザー エクスペリエンスを向上するには、次の 2 つの方法を検討してください:

方法 1: オーバースクロールを制限する

オーバースクロールを完全に無効にしたい場合は、次の CSS コードを使用します:

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

body {
    height: 100%;
    overflow: auto;
}

要素の overflow: hidden プロパティは、オーバーフロー コンテンツが表示されるのを防ぎ、ビューポート内でページを効果的に制限します。

方法 2: オーバースクロール動作をカスタマイズする

オーバースクロール動作をカスタマイズおよび制御するには、以下を使用します。タッチアクションプロパティ:

body {
    -webkit-touch-callout: none;
    -webkit-touch-action: manipulation;
}

上記のコードは、ページの定義された高さ内でのスクロールを含む一般的なタッチ操作を許可しながら、テキストの選択を防ぎます。より詳細に制御するには、水平スクロールのみを許可する Pan-X など、正確なタッチ アクションの値を指定できます。