異なるブラウザ間でスクロールバーのスタイルを一貫して設定するにはどうすればよいですか?

CSS スクロールバーのスタイル設定: クロスブラウザーのアプローチ

CSS スクロールバーのスタイル設定は、ブラウザーの不一致により長い間課題となってきました。ただし、この一見単純なタスクは、複数のアプローチを組み合わせることで実現でき、主要なブラウザ間で一貫したユーザー エクスペリエンスを保証できます。

ブラウザ間のスクロールバーのカスタマイズ

CSS プロパティChrome や Firefox などの新しいブラウザは、質問に記載されている従来のプロパティから離れているため、クロスブラウザのスクロールバーのスタイル設定に使用されるプロパティは制限されています。代わりに、Webkit ベースのブラウザは、スクロールバー用に特別に設計されたプロパティのセットをサポートしています。

Webkit スクロールバーのプロパティについて

次の CSS プロパティを使用して、Webkit のスクロールバーをカスタマイズできます。 -ベースのブラウザ:

• ::-webkit-scrollbar: スクロールバーの全体的な外観を定義します。
• ::-webkit-scrollbar-track: スクロールバー トラックの背景のスタイルを設定します。
• ::-webkit-scrollbar-thumb: スクロールバーの外観を設定しますthumb.

Webkit スクロールバーのスタイル設定の例

Webkit ベースのブラウザで明るい灰色のトラックと暗いサムを備えた最小限のスクロールバーを作成するには、次のコマンドを使用します。 CSS:

::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
}

::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.5);
}

追加リソース

さらなるカスタマイズ オプションとブラウザ間の互換性については、スクロールバーのスタイルに関する包括的な情報については、次のソースを参照してください:

[CSS Scrollbars: Cross-Browser Compatibility](https: //css-tricks.com/styling-scrollbars/)

以上が異なるブラウザ間でスクロールバーのスタイルを一貫して設定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。