ホームページ > 記事 > ウェブフロントエンド > CSSを使用してスクロールバーの位置を変更するにはどうすればよいですか?
スクロール バーは、ユーザーが Web コンテンツをスクロールできるようにする要素を指します。通常、ページの横または下部に水平または垂直のバーとして表示されます。スクロール バーは「スクロール バー サム」とも呼ばれ、ユーザーが上下にスクロールすると移動するスクロール バーの部分です。
この記事では、CSSを使用してスクロールバーの位置を変更する方法について説明します。次のトピックについて説明します -
要素の新しいクラスを作成します
スクロール バーとサムの配置
「position」プロパティを使用してスクロール バーの位置を変更します
まず、スクロール バーの位置を変更する要素の新しいクラスを CSS で作成する必要があります。たとえば、クラス「scrollablediv」の div のスクロールバーの位置を変更したい場合は、CSS で次のクラスを作成します -
リーリーこのクラスは、「scrollable-div」要素のスクロールバーをターゲットにし、幅を 5 ピクセルに設定し、背景色を明るい灰色に設定します。
このステップでは、ターゲットはスクロール バーの親指です。サムは、ユーザーがスクロールすると移動するスクロール バーの部分です。これを行うには、次のコードを CSS クラス -
に追加します。 リーリーこれにより、親指の色が黒に変わります。
最後のステップでは、「position」プロパティを使用してスクロール バーの位置を変更します。たとえば、スクロールバーを「scrollable-div」要素の左側に配置したい場合は、次のコードを使用します -
リーリーこれにより、スクロールバーが「scrollable-div」要素の左側に配置されます。
###例###この例では、スクロールバーを div 要素の右側に配置します。
リーリー ###結論は###以上がCSSを使用してスクロールバーの位置を変更するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。