Web 開発で高さを抑えたカスタム スクロールバーを作成するには?

スクロールバーの高さを調整する方法

この例では、特に高さを調整することによるスクロールバーの外観のカスタマイズについて説明します。これを実現するには、以下に示すスクロールバーの構造を理解する必要があります。

<code class="css">::-webkit-scrollbar { /* 1 */ }
::-webkit-scrollbar-button       { /* 2 */ }
::-webkit-scrollbar-track        { /* 3 */ }
::-webkit-scrollbar-track-piece  { /* 4 */ }
::-webkit-scrollbar-thumb        { /* 5 */ }
::-webkit-scrollbar-corner       { /* 6 */ }
::-webkit-resizer                { /* 7 */ }</code>

目的は 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>

このコードは、実際のスクロールバーより短く見える偽のスクロールバーを作成し、高さが調整されているように見せかけます。 ::-webkit-scrollbar-track 要素は元のスクロールバーを非表示にするために使用され、::after 疑似要素は偽のスクロールバーを作成します。 ::-webkit-scrollbar-thumb 要素は、短いスクロールバーのサムに似たスタイルになっています。 ::-webkit-scrollbar-track-piece 要素の margin-top プロパティと margin-bottom プロパティを調整することで、スクロールバーのサムの開始点と終了点を変更できます。

このコードは効果的にスクロールバーの外観を変更し、カスタマイズされた視覚エクスペリエンスを提供します。

以上がWeb 開発で高さを抑えたカスタム スクロールバーを作成するには?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。