CSS で垂直スクロールバーを永続的に表示するにはどうすればよいですか?

CSS オーバーフローによる垂直スクロールバーの永続的な表示についての問い合わせ: スクロール

CSS オーバーフロー-y を実装する場合: 割り当てられた範囲内でコンテンツを制限するためにスクロール高さがあるため、ユーザーが追加コンテンツの存在に確実に気づくことが難しい場合があります。 macOS では、Chrome と Safari は、ユーザーがアクティブにスクロールするか要素の上にマウスを置くまで、垂直スクロールバーを非表示にします。これにより、div にさらに多くのコンテンツが含まれていることをユーザーがすぐに認識できるかどうかという懸念が生じます。

一定のスクロールバー表示を強制する解決策

この問題の解決策には、次の CSS:

::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 7px;
}

::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: rgba(0, 0, 0, .5);
  box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}

この CSS は、macOS ブラウザのスクロールバーのデフォルトのスタイルをオーバーライドします。 -webkit-Appearance を none に設定すると、ブラウザのデフォルトのスタイルが無効になります。 width プロパティはスクロールバーの目的の幅を指定し、border-radius プロパティはスクロール サムに丸い形状を追加します。 background-color プロパティと box-shadow プロパティはカスタムの外観を提供し、スクロールバーの可視性を高めます。

この CSS を統合することにより、マウス カーソルが div 上にない場合でも、垂直スクロールバーは表示されたままになります。追加コンテンツが利用可能であることをユーザーが明確に認識できるようにします。このソリューションは、macOS のデフォルト動作によってもたらされる課題に対処し、スクロール可能なコンテンツを示す永続的なキューを提供することでユーザー エクスペリエンスを向上させます。

以上がCSS で垂直スクロールバーを永続的に表示するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。