更改滾動條的顏色

我想更改滾動條的樣式，因爲我在CSS以下使用，但是我希望將它用於頁面上的特定div而不是整個頁面。我怎麼能採用div class和id定製更改滾動條的顏色

::-webkit-scrollbar { 
    width: 12px; 
} 

::-webkit-scrollbar-track { 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
} 

::-webkit-scrollbar-thumb { 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
    background: #A8A8A8; 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
} 
::-webkit-scrollbar-thumb:window-inactive { 
    background: rgba(255,0,0,0.4); 
}

來源

2012-11-05 mydeve

是的，我們能做到這一點使用元素的ID，

試試這個，

#div1::-webkit-scrollbar { 
    width: 12px; 
} 

#div1::-webkit-scrollbar-track { 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
} 

#div1::-webkit-scrollbar-thumb { 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
    background: #A8A8A8; 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
} 

#div1::-webkit-scrollbar-thumb:window-inactive { 
    background: rgba(255,0,0,0.4); 
}

希望它會工作...

Live Demo

注：我想，它是在鉻合金工作良好。但ff &即它不工作..

來源

2012-11-05 10:21:34

@ user1799722：你確認了嗎？它工作嗎？ –

它工作在鉻....但有沒有任何代碼在IE8中工作此滾動？ – sree

如果你真的想要一些自定義滾動條，那麼有一些黑客可以在JavaScript和CSS中使用 - 好文章CSS-tricks。

也有很多jQuery插件。我使用的一個叫Lazybars - 實現起來非常簡單。

希望這有助於

來源

2014-02-12 22:39:54

看起來Lazybars插件不會隱藏原生滾動條（正如我在Firefox中的演示頁面上看到的那樣）。這不是免費的。有很多免費的jquery插件可以做更多 – Gromo

CSS定製目前由WebKit瀏覽器只（Safari瀏覽器，谷歌Chrome和Opera現在）的支持。 IE和Firefox不支持滾動條的CSS樣式。要製作交叉瀏覽器CSS自定義滾動條，您必須使用模擬滾動行爲的javascript解決方案或用自定義元素（原生滾動條位於這些自定義滾動條下或用包裝與overflow:hidden隱藏）替換原生滾動條。

有很多免費的jQuery插件。滾動條模擬器（如jScrollPane,0 Malihu Custom Scrollbar,perfect-scrollbar等）提供對滾動內容的完全控制，但有更多的js（模擬和處理所有事件）和滾動行爲不同於本地滾動行爲。此外，同一頁面上的大量滾動條可能會減慢速度。使用原生滾動

滾動條（如jQuery Scrollbar，Scroller，Baron，等...）在代碼少，保證滾動永遠是可行的（即使插件沒有因爲任何錯誤的工作）+更少的代碼（因爲沒有必要效仿滾動）+自動支持所有滾動功能，如滾動焦點元素，滾動文本選擇，滾動到錨元素，觸摸滾動，等等......

您可以比較自定義滾動插件here

來源

2014-04-21 08:23:51 Gromo

更改滾動條的顏色

回答

相關問題