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

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

#このチュートリアルの動作環境: 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 サイトの他の関連記事を参照してください。