CSSでスクロールバーを美しくカスタマイズする方法

Web 開発では、スクロール バーは、ページ上のコンテンツを限られたスペースでより適切に表示するのに役立つ一般的に使用されるコントロールです。ブラウザとオペレーティング システムにはスクロール バーの特定のデフォルト スタイルがあるため、多くの場合、CSS でスクロール バーを美しくカスタマイズする必要があります。

CSS では、いくつかの疑似要素を使用してスクロール バーのスタイルをカスタマイズできます。これらの疑似要素には次のものが含まれます。

1. ::-webkit-scrollbar: Chrome および Safari ブラウザでスクロール バーのサイズ、形状、スタイルを制御するために使用されます。

サンプルコード:

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

::-webkit-scrollbar-track {
  background-color: #f5f5f5;
  border-radius: 8px;
}

::-webkit-scrollbar-thumb {
  background-color: #dcdcdc;
  border-radius: 8px;
  border: 2px solid #f5f5f5;
}

2. ::-webkit-scrollbar-thumb: スクロール バーを制御するスライダー。サイズ、透明度、境界線、背景色を変更できます。およびその他の属性。疑似要素のスタイルが変更されていない場合は、ブラウザのデフォルトのスタイルが使用されます。

サンプルコード:

::-webkit-scrollbar-thumb:hover {
  background-color: #a3a3a3;
}

::-webkit-scrollbar-thumb:active {
  background-color: #6d6d6d;
}

::-webkit-scrollbar-thumb {
  background-color: #dcdcdc;
  border-radius: 8px;
  border: 2px solid #f5f5f5;
  opacity: 0.7;
}

3. ::-webkit-scrollbar-track: スクロール バーの制御に使用されるスライダー。サイズ、背景色、円を変更できます。角度とその他の属性。

サンプル コード:

::-webkit-scrollbar-track {
  background-color: #f5f5f5;
  border-radius: 8px;
}

4. ::-webkit-scrollbar-corner: スクロール バーの角を制御するために使用され、背景色と丸い角を変更できます。およびその他のプロパティ。この疑似要素は、ブラウザごとに異なる効果をもたらす可能性があります。

サンプル コード:

::-webkit-scrollbar-corner {
  background-color: #f5f5f5;
  border-radius: 8px;
}

さらに、他の CSS プロパティを使用して、スクロールバーの色、スクロールバーの幅などのスクロール バーのスタイルを制御することもできます。 。これらの属性はまだすべてのブラウザと互換性があるわけではないことに注意してください。互換性を確保する必要がある場合は、スクロール バーを美しくするために ::-webkit-scrollbar 擬似要素を使用することをお勧めします。

つまり、カスタマイズされたスクロール バー スタイルの美化と実装は、ページの重要性において重要な役割を果たします。疑似要素の使用とスタイルの制御により、Web サイトのスクロール バーをより美しくし、よりパーソナライズされた動作エクスペリエンスを追加することができ、それぞれの Web サイトのエクスペリエンスに対する抵抗を大幅に軽減できます。

最後に、あなたのレベルやレベルに関係なく、これらの面倒なことをする前に生産ニーズを把握することが最善です。

以上がCSSでスクロールバーを美しくカスタマイズする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。