Question

我想改变滚动条的样式，为此我在css下面使用，但我想在页面上的特定div使用它而不是整页。我如何使用div类或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); 
}

Answer 1

是的，我们可以使用元素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

注意：我认为，它在chrome方面运行良好。但是ff＆amp;即它不起作用..

Answer 2

如果你真的想要一些自定义滚动条，那么你可以在Javascript和CSS中使用一些黑客 - 关于CSS-tricks的好文章。

那里也有很多jQuery插件。我使用的一个名为Lazybars - 实现起来非常简单。

希望这有帮助

Answer 3

CSS自定义目前仅支持webkit浏览器（现在是Safari，Google Chrome和Opera）。 IE和Firefox不支持滚动条的CSS样式。要使crossbrowser CSS可自定义滚动条，您必须使用模拟滚动行为的javascript解决方案或用自定义元素替换本机滚动条（本机滚动条在这些自定义滚动条下或由overflow:hidden包装器隐藏）。

有很多免费的jQuery插件。滚动条模拟器（例如jScrollPane，Malihu Custom Scrollbar，perfect-scrollbar等等...）提供对滚动内容的完全控制，但有更多js（模拟和处理所有事件）和滚动行为与本机滚动行为不同。此外，同一页面上的大量滚动条可能会降低它的速度。

使用原生滚动的滚动条（例如jQuery Scrollbar，Scroller，Baron等等）代码较少，并保证滚动始终有效（即使插件执行由于任何错误而无法工作）+更少的代码（因为不需要模拟滚动）+自动支持所有滚动功能，如滚动到聚焦元素，滚动文本选择，滚动到锚元素，触摸滚动等... < / p>

您可以比较自定义滚动条插件here

改变滚动条的颜色

3 个答案: