ホームページ > 記事 > ウェブフロントエンド > CSSを使用してデフォルトのスクロールバーのスタイルを変更する方法
前書き:
多くのプロジェクトでは、スクロール バーのデフォルト スタイルを変更する必要があり、プラグインを個別にダウンロードして導入する必要はありません。
修正方法: (推奨チュートリアル: CSS Getting Started Tutorial)
&::-webkit-scrollbar { // 滚动条的背景 width: 16px; background: #191a37; height: 14px; } &::-webkit-scrollbar-track, &::-webkit-scrollbar-thumb { border-radius: 999px; width: 20px; border: 5px solid transparent; } &::-webkit-scrollbar-track { box-shadow: 1px 1px 5px #191a37 inset; } &::-webkit-scrollbar-thumb { //滚动条的滑块样式修改 width: 20px; min-height: 20px; background-clip: content-box; box-shadow: 0 0 0 5px #464f70 inset; } &::-webkit-scrollbar-corner { background: #191a37; }
簡易コード:
&::-webkit-scrollbar { width: 6px; height: 6px; background: transparent; } &::-webkit-scrollbar-thumb { background: transparent; border-radius: 4px; } &:hover::-webkit-scrollbar-thumb { background: hsla(0, 0%, 53%, 0.4); } &:hover::-webkit-scrollbar-track { background: hsla(0, 0%, 53%, 0.1); }
これの利点は、マウスをその上に移動すると表示されるように変更されたスクロールバー。
軸のスクロール バーを非表示にするコードの書き方:
overflow-x:hidden;
関連ビデオ チュートリアルの共有: css ビデオ チュートリアル
以上がCSSを使用してデフォルトのスクロールバーのスタイルを変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。