CSS でスクロールバーの高さをカスタマイズして、視覚的に魅力的で機能的な Web ページを作成するにはどうすればよいですか?

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

スクロールバーの高さの制御は、Web ページの視覚的な魅力と機能性を向上させるための便利なテクニックです。この記事では、画像で示されている例のようにスクロールバーの高さをカスタマイズする方法について説明します。

スクロールバーの構造について

まず、スクロールバーの構造を理解することが重要です。 。これはいくつかの要素で構成されています:

1. スクロールバー: スクロールバーのメインコンテナ。
2. スクロールバー ボタン: 上部の矢印
3. スクロールバー トラック: スクロールバーのサムが移動する垂直または水平のスペース。
4. スクロールバー トラック ピース: スクロールバーのセグメントtrack.
5. スクロールバーのサム: コンテンツ内の位置を示す可動要素。
6. スクロールバーのコーナー: スクロールバーとスクロールバーの交差点track.
7. Resizer: スクロールバーのサイズを変更できるようにするオプションの要素。

スクロールバーの高さの調整

希望のスクロールバーの高さを実現するには、次の手順を実行する必要があります。

1. スクロールバーのサムの開始点と終了点を設定します。 これにより、サムのスクロールの開始位置と停止位置が決まります。
2. スクロール トラックをシミュレートします。 スクロール トラックは、実際のトラックが 2 つの部分に分割されている場合でも、連続したトラックのように見せかけます。

コードの実装

次のコード スニペットは、これらの調整を実装する方法を示しています。

<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>

このコードは、高さが 5 ピクセルで、連続したトラックがあるように見えるスクロールバーを作成します。シミュレートされたトラックは ::after 疑似要素を使用して作成され、幅とトラックの背景は CSS プロパティを使用して調整されます。

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