CSSスクロールバーの設定方法

Web ページの継続的な開発に伴い、ユーザーの好みも徐々に変化しています。こうした変化だからこそ、多くのWebサイトでは徐々にデザインスタイルが更新されており、欠かせない要素の1つがスクロールバーです。スクロール バーは多くの Web サイトにとって不可欠なデザイン要素になっていると言わざるを得ません。 CSS では、スクロール バーのスタイルは一連の CSS セレクターを通じて実現できます。CSS スクロール バーの設定方法を詳しく分析してみましょう。

スクロールバーとは何ですか?

スクロール バーの設定方法を紹介する前に、まずスクロール バーとは何かを理解する必要があります。

スクロール バーは、Web ページのサイドバー、フレーム、または包含領域によく使用されるインタラクティブなコンポーネントです。スクロール バーを使用すると、狭い領域内のコンテンツを簡単にスクロールして、コンテンツ全体を表示できます。一般に、スクロール バーには水平スクロール バーと垂直スクロール バーの 2 種類があり、最もよく使用されるのは垂直スクロール バーです。

CSS では、独自のスクロール バー スタイルを簡単にカスタマイズできます。次にCSSスクロールバーの設定方法を一つずつ紹介していきます。

純粋な CSS スクロール バーを設定する方法

CSS スクロール バーを設定するには、::-webkit-scrollbar と ::- を使用する必要があります。 webkit-scrollbar-thumbセレクター。以下では、それぞれの使用状況を分析します。

::-webkit-scrollbarセレクター

::-webkit-scrollbarセレクターを使用すると、スクロールなどのスクロール バー コンテナーのスタイルを設定できます。バーの背景色、高さ、幅など。たとえば、::-webkit-scrollbar セレクターを使用すると、スクロールバー全体を灰色に設定できます。

::-webkit-scrollbar {
  background-color: #eee;
  width: 8px;
}

上記のコードは、幅 8 ピクセルのコンテナーを持つスクロールバーを定義し、背景が明るい灰色になります。

CSS 疑似クラスを使用して、スクロール バーのホバリング、スクロール バーのクリックなど、スクロール バーのステータスをカスタマイズすることもできます。たとえば、次のコードは、スクロール バーの上にマウスを置くと、スクロール バーの色を赤に変更します。

::-webkit-scrollbar

セレクターでは、スクロール バーのスタイルを定義しましたが、スクロール バーの外観は依然としてデフォルトのスタイルであり、比較的単調です。このとき、::-webkit-scrollbar-thumb セレクターを使用して、スクロール バーのサム (親指) のスタイルを設定する必要があります。

サム スタイルの設定例は次のとおりです: <pre class="brush:php;toolbar:false">::-webkit-scrollbar:hover {   background-color: #f00; }</pre>このコードは、スクロール バーのサムの灰色の背景と 4 ピクセルの丸い角を定義します。 色や丸い角の設定に加えて、影や境界線などを設定してスクロール バーの外観をさらに美しくすることもできます。

::-webkit-scrollbar-thumb {
  background-color: #999;
  border-radius: 4px;
}

上記のコードはスクロール バーを定義します。境界線と影の効果を備えたスクロールバーのサム。

ネットワーク全体と互換性のある CSS スクロール バーを設定する方法

上で純粋な CSS スクロール バーを設定する方法を紹介しましたが、この方法は Webkit を備えたブラウザでのみ有効です。カーネル (例: Chrome、Safari など)。他のブラウザ (Firefox、Edge など) の場合、同様の効果を実現するには JavaScript が必要です。

幸いなことに、一部のサードパーティ CSS ライブラリは、この点に関する解決策を提供してくれました。たとえば、mCustomScrollbar CSS ライブラリを使用すると、クロスブラウザーのカスタム スクロール バーを簡単に実装できます。

最初に、mCustomScrollbar CSS ファイルを導入します:

::-webkit-scrollbar-thumb {
  background-color: #999;
  border-radius: 4px;
  box-shadow: inset 1px 1px 2px rgba(0,0,0,.1);
  border: 1px solid #d8d8d8;
}

次に、カスタム スクロール バーを適用する必要がある場所に、次の 2 つのファイルを導入します:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.css" />

次に、JavaScript でコードでは、次のコードを使用して mCustomScrollbar を初期化します。

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js"></script>

上記のコードは、クラス

content

の要素に mCustomScrollbar を適用し、さまざまなブラウザで有効にすることができます。

同時に、mCustomScrollbar は、スクロール バーの幅、スクロール バーの色、スクロール バーの動作などの高度なカスタマイズ オプションもサポートしています。これらのオプションは初期化関数で設定できます。

$(document).ready(function () {
  $(".content").mCustomScrollbar();
});

上記のコードは、黒のテーマ、内部垂直スクロール バー、および 500 ミリ秒のスクロール バー効果を定義します。 概要

この記事では、CSS を使用してスクロール バーをカスタマイズする方法について詳しく説明しました。

::-webkit-scrollbar

および

::-webkit-scrollbar-thumb

セレクターと mCustomScrollbar ライブラリを導入することで、さまざまなブラウザーにカスタム スクロール バーを実装します。したがって、Web ページをデザインするときは、デザインのニーズに応じて、デフォルトのスクロール バーよりも優れたスクロール バー効果をカスタマイズすることができます。

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