CSS自定义滚动条在div [英] CSS customized scroll bar in div
问题描述
如何通过CSS（级联样式表）为一个 div 而不是整个页面自定义滚动条？
我认为整合关于滚动条，CSS和浏览器兼容性的最新信息会很有帮助。
滚动条CSS支持
目前，没有跨浏览器滚动条CSS样式定义。 W3C文章我最后提到以下声明，并最近更新（五月10 Oct 2014 03:09:48 CEST）：
某些浏览器（IE，Konqueror）支持非标准属性
'scrollbar-shadow-color'，'scrollbar-track-color'等。 这些
属性是非法的：它们既不在任何CSS
规范中定义也不标记为专有（通过用-vendor - 前缀
） / p>
Microsoft
正如其他人提到的， Microsoft支持滚动条样式（示例），但仅适用于IE8及更高版本。
- http://msdn.microsoft .com / en-us / library / ie / hh772048（v = vs.85）.aspx
- http://msdn.microsoft.com/en-us/library/ff974092(v=VS.85).aspx
-
示例：
.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：
}
b $ b
Chrome& Safari（webkit）
同样，webkit现在有自己的版本：
- 设置滚动条： https://www.webkit.org/blog/363/styling-scrollbars/
- 演示所有webkit滚动bar style
-
从 WebKit中的自定义滚动条，相关CSS：
/ * pseudo elements * /
:: - webkit-scrollbar {
:: - webkit-scrollbar-button {}
:: - webkit-scrollbar-track {}
:: - webkit-scrollbar-track-piece {}
:: -webkit-scrollbar-thumb {}
:: - webkit-scrollbar-corner {}
:: - webkit-resizer {}
/ *伪类选择器* /
：横向
：垂直
：递减
：递增
：开始
：结束
：双按钮
：按钮
：no-button
：corner-present
：window-inactive
Firefox（Gecko）
Firefox没有自己的滚动条样式版本根据此SO回答从 Firefox的自定义CSS滚动条。
没有Gecko等效于
webkit-scrollbar和朋友。
你必须坚持使用jQuery。
很多人都喜欢这个功能，请参阅：
https：// bugzilla。 mozilla.org/show_bug.cgi?id=77790
此报告要求的是您要求的完全相同的事物：
< a href =https://bugzilla.mozilla.org/show_bug.cgi?id=547260> https://bugzilla.mozilla.org/show_bug.cgi?id=547260
跨浏览器滚动栏样式
JavaScript库和插件可以提供跨浏览器解。有很多选项。
- 20 jQuery Scrollbar plugin with examples （2012年7月24日）
- NiceScroll：jQuery滚动插件的桌面，移动&触摸设备
- jQuery自定义内容卷轴
- Tiny Scrollbar - 一个轻量级jQuery插件
- 等。 li>
- 30+ Javascript / Ajax Techniques for Sliders，Scrollers and Scrollbars （2008年5月7日）
- 21实用的滚动CSS / JavaScript样式教程（2012年8月）
- 15+免费和高级jQuery滚动插件（2012年8月26日）
列表可以继续。您最好的选择是搜索，研究和测试可用的解决方案。
防止非法滚动条样式
为了防止未正确使用-vendor作为前缀的滚动条样式，本文在W3C提供了一些基本的说明。基本上，您需要将以下CSS添加到与浏览器相关联的用户样式表。这些定义将覆盖您访问的任何页面上的无效滚动条样式。
body，html {
scrollbar-face-颜色：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滚动条样式跨浏览器
-
- 如何创建自定义 注意：此答案包含来自各种来源的信息。如果使用了源，那么它也在此答案中链接。
How can I customize a scroll bar via CSS (Cascading Style Sheets) for one
divand not the whole page?解决方案I thought it would be helpful to consolidate the latest information on scroll bars, CSS, and browser compatibility.
Scroll Bar CSS Support
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 (Fri 10 Oct 2014 03:09:48 PM CEST):
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
As others have mentioned, Microsoft supports scroll bar styling (example) but, only for IE8 and above.
- http://msdn.microsoft.com/en-us/library/ie/hh772048(v=vs.85).aspx
- http://msdn.microsoft.com/en-us/library/ff974092(v=VS.85).aspx
Example:
.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: }
Chrome & Safari (webkit)
Similarly, webkit now has its own version:
- Styling Scrollbars: https://www.webkit.org/blog/363/styling-scrollbars/
- Demo of all webkit scroll bar styling
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
Firefox (Gecko)
Firefox does not have its own version of scroll bar styles according to this SO answer from Custom CSS Scrollbar for Firefox.
There's no Gecko equivalent to
::-webkit-scrollbarand friends.You'll have to stick with jQuery.
Plenty of people would like this feature, see:
https://bugzilla.mozilla.org/show_bug.cgi?id=77790This report is asking for the exact same thing you're asking for: https://bugzilla.mozilla.org/show_bug.cgi?id=547260
Cross-browser Scroll Bar Styling
JavaScript libraries and plug-ins can provide a cross-browser solution. There are many options.
- 20 jQuery Scrollbar plugin with examples (July 24, 2012)
- 30+ Javascript/Ajax Techniques for Sliders, Scrollers and Scrollbars (May 07, 2008)
- 21 Useful Scrollbar CSS/JavaScript Styling Tutorials (August, 2012)
- 15+ Free and Premium jQuery Scrolling Plugins (August 26, 2012)
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.
Prevent Illegal Scroll Bar Styling
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; }Duplicate or Similar Questions / Source Not Linked Above
- Changing the scrollbars' style
- CSS scrollbar style cross browser
- How to create a custom scrollbar on a div
Note: This answer contains information from various sources. If a source was used, then it is also linked in this answer.
这篇关于CSS自定义滚动条在div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
