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

Question

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

はここにここに私の現在のCSS overflow: hiddenは、スクロールバーを非表示に設定

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

Answer 1

である私のdivタグ

<div class="scroll"></div> 

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

あなたはoverflow: hiddenを設定しているこのライブexample

Answer 2

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

Answer 3

を参照してください。これにより、<div>のサイズが大きすぎるものは隠されます。つまり、スクロールバーは表示されません。あなたの<div>明示的な幅および/または高さを与え、そしてoverflowautoに変更：あなただけのコンテンツが長い<div>以上である場合は、スクロールバーを表示したい場合は

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

は、overflow: autoにoverflowを変更します。 overflow-yまたはoverflow-xを使用して1つのスクロールバーを表示することもできます。

Answer 4

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