CSSでスクロールバーの幅を設定する方法

王林
リリース: 2022-04-01 16:12:25
オリジナル
14111 人が閲覧しました

CSS では、「::-webkit-scrollbar」セレクターと width 属性を使用してスクロール バーの幅を設定できます。構文は「::-webkit-scrollbar{width: width value;」です。 }"; このセレクターはスクロール バー全体を選択する場合、選択した要素の幅を設定するために width 属性を使用します。

CSSでスクロールバーの幅を設定する方法

#このチュートリアルの動作環境: Windows 10 システム、CSS3&&HTML5 バージョン、thinkpad t480 コンピューター。

メソッドのアイデアは次のとおりです。

CSS で ::-webkit-scrollbar 疑似クラス セレクターを使用してスクロール バーのスタイルを設定し、次の width 属性でスクロール バーを設定します。この疑似クラスセレクターの幅。

::-webkit-scrollbar CSS 疑似クラス セレクターは、要素のスクロール バーのスタイルに影響します。

次の疑似要素セレクターを使用して、さまざまな Webkit ブラウザのスクロール バー スタイルを変更できます:

::-webkit-scrollbar — スクロール バー全体

: : -webkit-scrollbar-button — スクロール バーのボタン (上下の矢印)

::-webkit-scrollbar-thumb — スクロール バーのスクロール スライダー

::-webkit -scrollbar -track — スクロールバー トラック

::-webkit-scrollbar-track-piece — スライダーのないスクロール バーのトラック部分

::-webkit-scrollbar-corner — ある場合垂直スクロール バーと水平スクロール バーの交差点

#::-webkit-resizer — 特定の要素の隅の部分の部分的なスタイル (例: テキストエリアのドラッグ可能なボタン)

実装コード :

.visible-scrollbar, .invisible-scrollbar, .mostly-customized-scrollbar {
  display: block;
  width: 10em;
  overflow: auto;  
  height: 2em;
  }
  .invisible-scrollbar::-webkit-scrollbar {
  display: none;
  }
  /* Demonstrate a "mostly customized" scrollbar
 * (won't be visible otherwise if width/height is specified) */
 .mostly-customized-scrollbar::-webkit-scrollbar {
  width: 5px;  
  height: 8px;  
  background-color: #aaa; 
  /* or add it to the track */}/* Add a thumb */
  .mostly-customized-scrollbar::-webkit-scrollbar-thumb {
    background: #000; 
    }
ログイン後にコピー

関連する推奨事項:

CSS チュートリアル

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

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート