Chrome for Mac で不要な「オーバースクロール」を排除する方法

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

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

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

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

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

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

の overflow: hidden プロパティ要素は、オーバーフロー コンテンツが表示されるのを防ぎ、ビューポート内でページを効果的に境界付けします。 の overflow: auto プロパティ要素により、ページの指定された高さ内で自然なスクロールが可能になりますが、オーバースクロールは制限されます。

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

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

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

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

以上がChrome for Mac で不要な「オーバースクロール」を排除する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。