CSS を使用したカスタム スクロールバーの作成: 包括的なガイド

最新の Web ブラウザでは、開発者が CSS を使用してスクロールバーの外観をカスタマイズでき、機能を維持しながら Web アプリケーションの視覚的な魅力を高めることができます。このガイドでは、ブラウザ間の互換性を備えたカスタム スクロールバーを実装する方法について説明します。

基本的なセットアップ

まず、カスタム スクロールバーを機能させるコンテナを確立しましょう:

<div class="scrollbar-container">
  <h3 id="Visible-custom-scrollbar">Visible custom scrollbar</h3>
  <p>
    <!-- Content that creates scrollable overflow -->
  </p>
</div>

コンテナのスタイリング

スクロール可能なコンテナには特定のサイズとオーバーフロー プロパティが必要です:

.scrollbar-container {
  height: 50%;           /* Fixed height to enable scrolling */
  width: 50%;           /* Container width */
  margin: 0 auto;       /* Center the container */
  overflow: auto;       /* Enable scrolling */
  padding: 1rem;        /* Internal spacing */
}

クロスブラウザの実装

WebKit ブラウザ (Chrome、Safari、Edge)

WebKit ベースのブラウザの場合、::-webkit-scrollbar 疑似要素を使用します:

.scrollbar-container::-webkit-scrollbar {
  width: 4px;                    /* Width of the scrollbar */
  background-color: white;       /* Background color */
  border-radius: 100vw;         /* Rounded corners */
}

.scrollbar-container::-webkit-scrollbar-track {
  background: white;            /* Track color */
  border-radius: 100vw;        /* Rounded corners for track */
}

.scrollbar-container::-webkit-scrollbar-thumb {
  background: plum;            /* Scrollbar thumb color */
  border-radius: 100vw;       /* Rounded corners for thumb */
}

Firefox

Firefox では、スクロールバーの幅とスクロールバーの色のプロパティを使用する別のアプローチが必要です。

@-moz-document url-prefix() {
  .scrollbar-container {
    scrollbar-width: thin;           /* Width of the scrollbar */
    scrollbar-color: fuchsia white;  /* thumb and track colors */
  }  
}

設計上の考慮事項

実装には、いくつかの思慮深い設計上の選択肢が含まれています。

1. 境界半径: 100vw の値により、トラックとサムの両方に完全に丸い角が作成されます。
2. 最小幅: 4 ピクセルの幅では、スクロールバーが表示されますが、目立たなくなります。
3. カラースキーム: プラム/フクシアの親指を備えた白いトラックは、視覚的な魅力を維持しながら良好なコントラストを提供します。
4. 一貫したタイポグラフィ: 読みやすさを高めるために、デザインには Rubik フォント ファミリが使用されています。

@import url(https://fonts.googleapis.com/css2?family=Rubik);

CSS変数

この例では、一貫したテーマのために CSS 変数を使用しています。

:root {
  --primary-text-color: #222;
  --secondary-text-color: #fff;
  --primary-bg-color: #222;
  --secondary-bg-color: #fff;
  --tertiary-bg-color: #ddd;
}

ブラウザの互換性

• WebKit ブラウザ (Chrome、Safari、Edge): 詳細なカスタマイズを完全にサポート
• Firefox: スクロールバーの幅とスクロールバーの色による簡素化されたカスタマイズ
• Internet Explorer: カスタム スクロールバーはサポートされません
• レガシー エッジ: 限定サポート

ベストプラクティス

1. 使いやすさの維持: スクロールバーを表示し、機能させておきます
2. 一貫したスタイル: スクロールバーの色をサイトのテーマと一致させます
3. テスト: さまざまなブラウザでの表示を確認します
4. レスポンシブ デザイン: さまざまなビューポート サイズでスクロールバーがどのように表示されるかを検討します

最終結果

結論

カスタム スクロールバーを使用すると、機能を維持しながら Web アプリケーションの視覚的な魅力を高めることができます。これらのパターンに従い、ブラウザ間の互換性を考慮することで、ユーザーにとって一貫した魅力的なスクロール エクスペリエンスを作成できます。

以上がCSS を使用したカスタム スクロールバーの作成: 包括的なガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。