3

WebkitのWebページでいくつかのスクロールバーをスタイリングしていて、背景画像の一部がにじむようにトラックを半透明にしたいのですが、RGBa値を挿入すると、RGB値と同じように扱われます（アルファチャネル）。::-webkit-scrollbarsRGBaを受け入れませんか？私はそれがのようなものを受け入れないことを知っているtransitionsので、WebKitは他のクールな効果もスキップしましたか？

コード：

::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 8px;
}

::-webkit-scrollbar-track {
    background-color: rgba(57,57,57, .6);
    border-radius: 8px;
}
::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background-color: rgba(156, 156, 156, .6);
}

（しかし、私の側では、それはrgba単なるrgb価値として扱われています）

4

2 に答える 2

4

垂直ページでそれを行うために私の垂直jsfiddleをチェックしてください。次のような背景画像を使用して透明なトラックを設定します。

::-webkit-scrollbar-track {
    background: rgba(57,57,57, .6);;
}

横長のページについては、この横長のフィドルをチェックしてください。水平方向のコードとの違いは、ページを100％の高さに設定することです。

body, html, .scrolls {
    height: 100%;   
}

次に、ページのコンテンツをdivでラップしました。これは、次のように、ページ自体ではなく、スクロールが発生する場所です。

.scrolls { 
    overflow-x: scroll;
    overflow-y: hidden;
    white-space:nowrap;
    background-image: url('http://www.evokia.com/images/large-background.jpg');
}

これは、ページの水平スクロールがページの背景を取得しないように見えるという事実の回避策です。したがって、透明なトラックを取得するには、ページにスクロールを作成する必要がありました。

于 2012-12-23T19:59:41.367 に答える
0

私はwebkitがRGBa値をサポートしていると確信しています。私はこれを使用しましたが、body::-webkit-scrollbar-track{}これは問題なく機能しました。

また、Jscrollペインプラグインを使用しました。これは非常に直感的であり、これはrgba値もサポートします。これは、完全なWebページのカスタマイズされたスクロールバーとIE7+もサポートできます。

コードを見て、問題があるかどうかを確認することはできますか？

于 2012-12-23T20:01:57.560 に答える