更改滚动条的颜色

我想更改滚动条的样式，因为我在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

更改滚动条的颜色

回答

相关问题