CSSを使用してスクロールバーの位置を変更するにはどうすればよいですか?

スクロール バーは、ユーザーが Web コンテンツをスクロールできるようにする要素を指します。通常、ページの横または下部に水平または垂直のバーとして表示されます。スクロール バーは「スクロール バー サム」とも呼ばれ、ユーザーが上下にスクロールすると移動するスクロール バーの部分です。

この記事では、CSSを使用してスクロールバーの位置を変更する方法について説明します。次のトピックについて説明します -

• 要素の新しいクラスを作成します

• スクロール バーとサムの配置

• 「position」プロパティを使用してスクロール バーの位置を変更します

要素の新しいクラスを作成します

まず、スクロール バーの位置を変更する要素の新しいクラスを CSS で作成する必要があります。たとえば、クラス「scrollablediv」の div のスクロールバーの位置を変更したい場合は、CSS で次のクラスを作成します -

リーリー

このクラスは、「scrollable-div」要素のスクロールバーをターゲットにし、幅を 5 ピクセルに設定し、背景色を明るい灰色に設定します。

スクロールバーのつまみの配置

このステップでは、ターゲットはスクロール バーの親指です。サムは、ユーザーがスクロールすると移動するスクロール バーの部分です。これを行うには、次のコードを CSS クラス -

に追加します。 リーリー

これにより、親指の色が黒に変わります。

「position」属性を使用してスクロール バーの位置を変更します

最後のステップでは、「position」プロパティを使用してスクロール バーの位置を変更します。たとえば、スクロールバーを「scrollable-div」要素の左側に配置したい場合は、次のコードを使用します -

リーリー

これにより、スクロールバーが「scrollable-div」要素の左側に配置されます。

＃＃＃例＃＃＃

この例では、スクロールバーを div 要素の左側に配置します。

リーリー ＃＃＃例＃＃＃

この例では、スクロールバーを div 要素の右側に配置します。

リーリー ＃＃＃結論は＃＃＃

CSS を使用してスクロール バーの位置を変更するのは簡単なプロセスであり、要素の新しいクラスを作成し、スクロール バーとスライダーの位置を決め、「position」プロパティを使用してスクロール バーの位置を変更することで実行できます。スクロール・バー。少しの CSS の知識といくつかの実験があれば、Web サイトに独自のカスタム外観を作成できます。

以上がCSSを使用してスクロールバーの位置を変更するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。