2

ボタンをクリックして、実行時にスクロールバーの css (色など) を変更することはできますか?

これは Google Chrome で動作する必要があるため、次のものを使用しています。

::-webkit-scrollbar {
    width:15px;
}
::-webkit-scrollbar-thumb {
    background-color:#999;
    border:solid #fff;
}
::-webkit-scrollbar-thumb:hover {
    background:#777;
}
::-webkit-scrollbar-thumb:vertical {
    border-width:6px 4px;
}

この例は jsfiddle で作成しました: http://jsfiddle.net/wZwJz/
このボタンを追加した場所:

<button id="changecss">Change CSS</button>

そして jQuery リスナー:

$("#changecss").on("click", function(){
   // Action goes here
});

私はこれを試しました:$("::-webkit-scrollbar").css("backgroundColor", "#F00");しかし、明らかに と呼ばれる要素がない::-webkit-scrollbarため、jQueryがそれを見つけることは不可能です...

4

2 に答える 2

1

さらに数時間、何度も試行した後、これを解決する方法を見つけました。
これがjsfiddleです：http://jsfiddle.net/promatik/wZwJz/18/

したがって、特定のスクロールバー css の前にクラスを追加するのがコツです。

.red::-webkit-scrollbar  { ... }

.blue::-webkit-scrollbar { ... }

次に、本体には、このクラスのいずれかが必要です (jsfiddle では、html を手動で制御できないため、javascript でクラスを追加しています)。

$("body").addClass("blue");

.redボタンはクラスとクラスを切り替えるだけです.blue。

$("#changecss").on("click", function(){
    $(".red,.blue").toggleClass("red").toggleClass("blue");
});

Chrome でのスクロール バーのレンダリングにも問題があります(少なくとも v25 まで)。これは、スクロール バーを削除して再度追加することで解決できます。そのための関数を次に示します。

// Hack to force scroll redraw
function scrollReDraw() {
    $('body').css('overflow', 'hidden').height();
    $('body').css('overflow', 'auto');
}
于 2013-03-24T17:44:40.673 に答える
1

ここに記載されているように、疑似セレクターを選択することはできません: リンク

コードは次のようにする必要があります。

$("#changecss").on("click", function(){
    var ss = document.styleSheets[0];
    ss.insertRule('::-webkit-scrollbar {background-color: red}', 0);
});

ただし、このフィドルに見られるように、スクロールバーはさらに奇妙に思えます: http://jsfiddle.net/wZwJz/4/

ホバーするまで色は変わりません。私は実際にこれについてもっと学ぶことに興味があります。というわけで、何とか解いてみます。ただし、少なくとも今は正しい方向に向かっているはずです。

編集：少しいじってグーグルで調べた後、今のところこれは不可能だと言います。ここにいくつかのメモを含む最新のフィドルがあります:リンク

于 2013-03-13T03:18:43.757 に答える