web-dev-qa-db-ja.com

Googleでcssを使用してスクロールバーのスタイルを設定するChrome（-webkit）

誰か助けてくれますか？スクロールバーにシンプルなスタイルをしたいです。インターネットで情報を見つけて試しましたが、何らかの理由で実際には機能しないようです。ページを更新するとスクロールバーはきれいに見えますが、スクロールバーに触れるとすぐに狂ってしまいます。それはたくさんの色で塗りつぶされており、それがスクロールバーであることを理解することはできません。

タッチする前の外観- http://i40.tinypic.com/a2evro.png

タッチした後の外観- http://i44.tinypic.com/qzkirn.png

これが私がcssに入れたコードです。

::-webkit-scrollbar {
width: 16px;
height: 16px; }

::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.2);
-webkit-box-shadow: inset 1px 1px 0 rgba(0,0,0,0.10),inset 0 -1px 0 rgba(0,0,0,0.07); }

皆さん、ありがとうございました。乾杯。アレックス

cssgoogle-chromewebkitscrollbar
27
Alexandru Vlas

これは動作する例です ：

::-webkit-scrollbar {
    height: 12px;
    width: 12px;
    background: #000;
}

::-webkit-scrollbar-thumb {
    background: #393812;
    -webkit-border-radius: 1ex;
    -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75);
}

::-webkit-scrollbar-corner {
    background: #000;
}

または、 jScrollPane を使用できます。

50
orel