div中的CSS自定义滚动条 [英] CSS customized scroll bar in div
问题描述
如何通过 CSS(层叠样式表)为一个 div
而不是整个页面自定义滚动条?
How can I customize a scroll bar via CSS (Cascading Style Sheets) for one div
and not the whole page?
推荐答案
我认为整合有关滚动条、CSS 和浏览器兼容性的最新信息会很有帮助.
I thought it would be helpful to consolidate the latest information on scroll bars, CSS, and browser compatibility.
目前,没有跨浏览器滚动条 CSS 样式定义.我在最后提到的 W3C 文章有以下声明并且最近更新(2014 年 10 月 10 日):
Currently, there exists no cross-browser scroll bar CSS styling definitions. The W3C article I mention at the end has the following statement and was recently updated (10 Oct 2014):
某些浏览器(IE、Konqueror)支持非标准属性scrollbar-shadow-color"、scrollbar-track-color"等.这些属性是非法的:它们既没有在任何 CSS 规范中定义,也没有标记为专有(通过在它们前面加上-vendor-")
Some browsers (IE, Konqueror) support the non-standard properties 'scrollbar-shadow-color', 'scrollbar-track-color' and others. These properties are illegal: they are neither defined in any CSS specification nor are they marked as proprietary (by prefixing them with "-vendor-")
微软
正如其他人提到的,Microsoft 支持滚动条样式,但仅适用于 IE8 及更高版本.
Microsoft
As others have mentioned, Microsoft supports scroll bar styling, but only for IE8 and above.
示例:
.TA {
scrollbar-3dlight-color:gold;
scrollbar-arrow-color:blue;
scrollbar-base-color:;
scrollbar-darkshadow-color:blue;
scrollbar-face-color:;
scrollbar-highlight-color:;
scrollbar-shadow-color:
}
铬 &Safari (WebKit)
同样,WebKit 现在有了自己的版本:
Chrome & Safari (WebKit)
Similarly, WebKit now has its own version:
来自 WebKit 中的自定义滚动条,相关 CSS:
From Custom scrollbars in WebKit, relevant CSS:
/* pseudo elements */
::-webkit-scrollbar { }
::-webkit-scrollbar-button { }
::-webkit-scrollbar-track { }
::-webkit-scrollbar-track-piece { }
::-webkit-scrollbar-thumb { }
::-webkit-scrollbar-corner { }
::-webkit-resizer { }
/* pseudo class selectors */
:horizontal
:vertical
:decrement
:increment
:start
:end
:double-button
:single-button
:no-button
:corner-present
:window-inactive
从 64 版开始,Firefox 支持通过属性 scrollbar-color
(部分地,W3C 草案) 和 scrollbar-width
(W3C 草案).在这个答案中可以找到有关实施的一些很好的信息.
As of version 64 Firefox supports scrollbar styling through the properties scrollbar-color
(partially, W3C draft) and scrollbar-width
(W3C draft). Some good information about the implementation can be found in this answer.
JavaScript 库和插件可以提供跨浏览器的解决方案.有很多选择.
JavaScript libraries and plug-ins can provide a cross-browser solution. There are many options.
- 20 个带有示例的 jQuery 滚动条插件(7 月24, 2012)
- 20 jQuery Scrollbar plugin with examples (July 24, 2012)
- NiceScroll : jQuery Scrolling plugin for desktop,mobile & touch devices
- jQuery custom content scroller
- Tiny Scrollbar – A lightweight jQuery plugin
- etc.
名单可以继续.最好的办法是搜索、研究和测试可用的解决方案.我相信你会找到适合你需要的东西.
The list could go on. Your best bet is to search around, research, and test the available solutions. I am sure you will be able to find something that will fit your needs.
以防万一您想阻止未正确添加-vendor"前缀的滚动条样式,W3C 上的这篇文章提供了一些基本说明.基本上,您需要将以下 CSS 添加到与浏览器关联的用户样式表中.这些定义将覆盖您访问的任何页面上的无效滚动条样式.
Just in case you want to prevent scroll bar styling that hasn't been properly prefixed with "-vendor", this article over at W3C provides some basic instructions. Basically, you'll need to add the following CSS to a user style sheet associated with your browser. These definitions will override invalid scroll bar styling on any page you visit.
body, html { scrollbar-face-color: ThreeDFace !important; scrollbar-shadow-color: ThreeDDarkShadow !important; scrollbar-highlight-color: ThreeDHighlight !important; scrollbar-3dlight-color: ThreeDLightShadow !important; scrollbar-darkshadow-color: ThreeDDarkShadow !important; scrollbar-track-color: Scrollbar !important; scrollbar-arrow-color: ButtonText !important; }
上面没有链接的重复或类似问题/来源
- 更改滚动条的样式
- CSS 滚动条样式跨浏览器
- 如何在 div 上创建自定义滚动条 (Facebook风格)
注意:此答案包含来自各种来源的信息.如果使用了来源,则此答案中也会链接它.
Note: This answer contains information from various sources. If a source was used, then it is also linked in this answer.
这篇关于div中的CSS自定义滚动条的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
- 20 jQuery Scrollbar plugin with examples (July 24, 2012)