CSS と HTML を使用してスクロールバーの高さをカスタマイズするにはどうすればよいですか?

スクロールバーの高さのカスタマイズ

スクロールバーのサイズの制御

スクロールバーの高さを変更するには、その構造を理解する必要があります。スクロールバーのコンポーネントを視覚化するには、以下の画像を参照してください:

[スクロールバー構造のイメージ]

サイズを変更するには、次の 2 つの側面に焦点を当てます:

• スクロールバーのサム (5) のスクロールの開始位置と停止位置を制御する
• デフォルトのスクロール トラックを使用する代わりに偽のスクロール トラックをシミュレートする (3)

カスタム スクロールバーの作成

次のコードを考えてみましょう:

CSS:

<code class="css">.page {
  position: relative;
  width: 100px;
  height: 200px;
}

.content {
  width: 100%;
}

.wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  overflow-y: scroll;
  overflow-x: hidden;
  border: 1px solid #ddd;
}

.page::after {
  content: '';
  position: absolute;
  z-index: -1;
  height: calc(100% - 20px);
  top: 10px;
  right: -1px;
  width: 5px;
  background: #666;
}

.wrapper::-webkit-scrollbar {
  display: block;
  width: 5px;
}

.wrapper::-webkit-scrollbar-track {
  background: transparent;
}

.wrapper::-webkit-scrollbar-thumb {
  background-color: red;
  border-right: none;
  border-left: none;
}

.wrapper::-webkit-scrollbar-track-piece:end {
  background: transparent;
  margin-bottom: 10px;
}

.wrapper::-webkit-scrollbar-track-piece:start {
  background: transparent;
  margin-top: 10px;
}</code>

HTML:

<code class="html"><div class="page">
  <div class="wrapper">
    <div class="content">
      a<br/>
      a<br/>
      a<br/>
      a<br/>a<br/>
      a<br/>
      a<br/>
      a<br/>
      a<br/>
      a<br/>
      a<br/>
      a<br/>
      a<br/>a<br/>
      a<br/>
      a<br/>
      a<br/>
      a<br/>
      a<br/>
      a<br/>
      a<br/>a<br/>
      a<br/>
      a<br/>
      a<br/>
      a<br/>
      a<br/>
      a<br/>
      a<br/>
      a<br/>a<br/>
      a<br/>
      a<br/>
      a<br/>
      a<br/>
    </div>
  </div>
</div></code>

このコード:

• ページ要素の after 疑似要素を使用して、偽のスクロール トラックを定義します。
• ラッパー要素のスクロールバーに適用される CSS プロパティを使用して、スクロールバーの幅、背景、つまみの色をカスタマイズします。
• マージンを追加しますスクロールバーのトラックピースに追加して、スクロールサムの開始点と終了点を制御します。

これらの変更を実装することで、設計要件を満たすようにスクロールバーの高さを変更できます。

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