CSS3でWebkitスクロールバーをスタイルするにはどうすればよいですか?
これらのプロパティを意味します
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
ここに私のdivタグがあります
<div class="scroll"></div>
これが私の現在のCSSです
.scroll {
width: 200px; height: 400px;
overflow: hidden;
}
overflow: hidden
を設定すると、スクロールバーが非表示になります。 overflow: scroll
を設定して、スクロールバーが常に表示されるようにします。
::webkit-scrollbar
プロパティを使用するには、呼び出す前に.scroll
をターゲットにするだけです。
.scroll {
width: 200px;
height: 400px;
background: red;
overflow: scroll;
}
.scroll::-webkit-scrollbar {
width: 12px;
}
.scroll::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
}
.scroll::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
こちらをご覧ください 例
.scroll {
width: 200px; height: 400px;
overflow: auto;
}
Css3スクロールバーの問題は、コンテンツに対してのみ対話を実行できることです。タッチデバイスのスクロールバーを操作することはできません。
overflow: hidden
を設定しています。これは、<div>
には大きすぎるものを隠します。つまり、スクロールバーは表示されません。 <div>
に明示的な幅および/または高さを指定し、overflow
をauto
に変更します。
.scroll {
width: 200px;
height: 400px;
overflow: scroll;
}
コンテンツが<div>
よりも長い場合にのみスクロールバーを表示する場合は、overflow
をoverflow: auto
に変更します。 overflow-y
またはoverflow-x
を使用して、1つのスクロールバーのみを表示することもできます。