ホームページ > 記事 > ウェブフロントエンド > CSS でスクロールバーの高さをカスタマイズするにはどうすればよいですか?
スクロールバーの高さのカスタマイズ
スクロールバーの高さを変更するには、スクロールバーの構造構成を理解することが不可欠です。スクロールバーは、次のようないくつかの要素で構成されます。
提供された画像に示されている目的の効果を実現するには、次のことを行う必要があります。
次に、その方法を示すサンプル コード スニペットを示します。これを実現するには:
<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 サイトの他の関連記事を参照してください。