54

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

4 に答える 4

120

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

この実例を見る

于 2012-09-09T09:04:25.763 に答える
1

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

于 2014-10-14T04:48:35.240 に答える
0 
.scroll {
   width: 200px; height: 400px;
   overflow: auto;
}
于 2012-09-09T09:04:38.580 に答える
0

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

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

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

于 2012-09-09T09:08:02.107 に答える