この記事では、H5 スクロールバーのスタイルを設定するためのサンプルコードを紹介し、皆さんに共有します。詳細は次のとおりです。
/* スクロール バーのスライダーの背景色 */::-webkit-scrollbar-track {background-color: #b46868;}/* スライダーの色 */::-webkit-scrollbar-thumb {background-color : rgba( 0, 0, 0, 0.2);} /* スライド レールの両端のリスニング ボタンの色*/::-webkit-scrollbar-button {background-color: #7c2929;}/* 水平スクロールバーと垂直スクロールバーの交差点の鋭角の色*/::-webkit-scrollbar-corner {background-color: black;} // IE 独自の設定方法、 1 つ目は、スクロール バーをカスタマイズできるブラウザーは、IE5.5 以降の body { スクロールバー-フェイスカラー: #b46868;} と互換性があります。 例 /* ドキュメント スクロールバー */::-webkit-scrollbar { width: 8px;}::-webkit-scrollbar-track { box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); 境界半径: 10px;}::-webkit-scrollbar-thumb { 境界半径: 10px; ボックスシャドウ: インセット 0 0 6px rgba(0, 0, 0, 0.5);}/* スクロール可能な要素 */.some-element::webkit-scrollbar {}<div class=custom-scrollbar> <p> 優れたエリートの能力を維持するために、努力を続けてください。モレスティアス・テンポラ・ヴェリット・クアス、キスクアム・エニム。いいですか、座ってください? </p></div>以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。