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

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

スクロールバーの高さを変更するには、スクロールバーの構造構成を理解することが不可欠です。スクロールバーは、次のようないくつかの要素で構成されます。

• Scrollbar Thumb: ユーザーがスクロールするために操作するドラッグ可能な領域を表します。
• Scrollbar Track: 親指が動く背景領域。

提供された画像に示されている目的の効果を実現するには、次のことを行う必要があります。

1. 開始点と終了点を定義するスクロールバーのサムを使用して、特定の領域内でのみスクロールするようにします。
2. 代替スクロール トラックを作成し、デフォルト トラックを置き換えます。

次に、その方法を示すサンプル コード スニペットを示します。これを実現するには:

<code class="css">.wrapper {
  overflow-y: scroll;
  width: 100%;
  height: 100%;

  /* Create a fake scroll track */
  &::after {
    content: '';
    position: absolute;
    width: 5px;
    height: calc(100% - 20px);
    z-index: -1;
    top: 10px;
    background: #666;
    right: -1px;
  }

  /* Customize the scrollbar properties */
  &::-webkit-scrollbar {
    width: 5px;
  }

  &::-webkit-scrollbar-track {
    background: transparent;
  }

  &::-webkit-scrollbar-corner {
    background: transparent;
  }

  &::-webkit-scrollbar-thumb {
    background-color: red;
    border: none;
    border-radius: 5px;
  }

  /* Define the end and start points of the scrollbar thumb */
  &::-webkit-scrollbar-track-piece:end {
    margin-bottom: 10px;
  }

  &::-webkit-scrollbar-track-piece:start {
    margin-top: 10px;
  }
}</code>

このコード スニペットは、提供された画像で指定されているように、高さ 50% のカスタム スクロールバーを作成します。これは、スクロールバーのサムのサイズを調整し、元のスクロール トラックを置き換える偽のスクロール トラックを作成することによって行われます。

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