CSS を使用したカスタムスクロールバーの作成: 包括的なガイド-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

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

Barbara Streisand

Nov 01, 2024 am 06:07 AM

Creating Custom Scrollbars with CSS: A Comprehensive Guide

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

基本的なセットアップ

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

<div class="scrollbar-container">
  <h3>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 */
  }  
}

ログイン後にコピー

設計上の考慮事項

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

境界半径: 100vw の値により、トラックとサムの両方に完全に丸い角が作成されます。
最小幅: 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;
}

ログイン後にコピー