CSS を使用して垂直スクロールバーを常に表示するにはどうすればよいですか?

CSS - オーバーフロー: スクロール;垂直スクロールバーが常に表示されるようにする

Web 開発の世界では、スクロールバーは、ユーザーが表示領域を超えるコンテンツ内を移動できるようにする上で重要な役割を果たします。ただし、OSx Lion などの特定のプラットフォームでは、スクロールバーがデフォルトで非表示になる場合があり、ユーザーがスクロール可能なコンテンツの存在に気づかない可能性があるという問題が発生します。

この問題に対処するために、Web 開発者は CSS プロパティのオーバーフローを使用できます。 y: スクロールします。 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);
}

これらのルールはデフォルトをオーバーライドします。ブラウザーのスクロールバーのスタイルを設定し、スクロールバーを常に表示できるようにします。 Webkit の外観: なし。プロパティはデフォルトのスタイルを削除し、他のプロパティはスクロールバーの幅、境界線の半径、背景色、影を設定します。

これらのルールを組み込むことで、Web 開発者は垂直スクロールバーが指定された範囲内で常に表示されるようにすることができます。要素。これにより、ユーザーは最初はその存在に気づかなかったとしても、コンテンツ内を簡単かつ直感的に移動できるようになります。

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