4

我想改变滚动条的样式，为此我在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); 
}
4

3 回答 3

0

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

希望它会工作...

现场演示

注意：我认为，它在 chrome 中运行良好。但是 ff & ie 它不工作..

于 2012-11-05T10:21:34.250 回答
0

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

那里也有很多 jQuery 插件。我使用过的一种叫做Lazybars - 实现起来非常简单。

希望这可以帮助

于 2014-02-12T22:39:54.017 回答
0

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

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

使用本机滚动的滚动条（如jQuery Scrollbar、Scroller、Baron等）的代码更少，并保证滚动始终有效（即使插件因任何错误而无法工作）+ 更少的代码（因为有无需模拟滚动）+自动支持所有滚动功能，如滚动到焦点元素、滚动文本选择、滚动到锚元素、触摸滚动等...

您可以在此处比较自定义滚动条插件

于 2014-04-21T08:23:51.763 回答