web-dev-qa-db-ja.com

divのCSS3スクロールバースタイル

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;
}
htmlcsscss3scrollbar
30
2619

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); 
}
​

こちらをご覧ください 例

71
jacktheripper
.scroll {
   width: 200px; height: 400px;
   overflow: auto;
}
0
Meisam Mulla

Css3スクロールバーの問題は、コンテンツに対してのみ対話を実行できることです。タッチデバイスのスクロールバーを操作することはできません。

0
user2845300

overflow: hiddenを設定しています。これは、<div>には大きすぎるものを隠します。つまり、スクロールバーは表示されません。 <div>に明示的な幅および/または高さを指定し、overflowをautoに変更します。

.scroll {
   width: 200px;
   height: 400px;
   overflow: scroll;
}

コンテンツが<div>よりも長い場合にのみスクロールバーを表示する場合は、overflowをoverflow: autoに変更します。 overflow-yまたはoverflow-xを使用して、1つのスクロールバーのみを表示することもできます。

0
Bojangles