如何在運行時用javascript更改滾動條的CSS？

是否可以通過單擊按鈕在運行時更改滾動條的css（例如顏色）？如何在運行時用javascript更改滾動條的CSS？

這隻需在谷歌瀏覽器工作，所以我使用：

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

我tr滅蠅燈這樣的：$("::-webkit-scrollbar").css("backgroundColor", "#F00");但顯然沒有叫::-webkit-scrollbar元素，所以這是不可能的jQuery找到它......

來源

2013-03-13 Toni Almeida

經過一些更多的小時和許多嘗試後，我想出瞭如何解決這個問題。
這裏是的jsfiddle：http://jsfiddle.net/promatik/wZwJz/18/

因此，關鍵是具體的滾動條CSS前添加類：

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

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

然後身體，必須有這個類之一（的jsfiddle我由JavaScript添加類，因爲我無法控制手動HTML）：

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

而且按鈕只需要切換.red和.blue類。

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

還有帶滾動條的鍍鉻渲染問題（至少直到V25），可以通過移除滾動條，然後重新添加被克服，這裏是一個函數：

// Hack to force scroll redraw 
function scrollReDraw() { 
    $('body').css('overflow', 'hidden').height(); 
    $('body').css('overflow', 'auto'); 
}

來源

2013-03-24 17:44:40

您不能選擇僞選擇這裏提到： link

您的代碼將需要做的是這樣的：

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

滾動條顯得更加古怪在這個小提琴但是看到： http://jsfiddle.net/wZwJz/4/

只有將鼠標懸停在上面，顏色纔會更改。我有興趣更多地瞭解這一點。所以我會嘗試找出一些東西。但至少現在你應該朝着正確的方向前進。

編輯：因此，經過一點點的擺弄和谷歌搜索，我想說這是不可能的，現在。這裏有一些筆記最新的小提琴：link

來源

2013-03-13 03:18:43

肖恩·科克爾，謝謝你花的時間。 +1的努力...現在我要刪除我的應用程序更改滾動條的顏色的能力。 – 2013-03-14 01:42:36

如何在運行時用javascript更改滾動條的CSS？

回答

相關問題