div中的CSS自定义滚动条

本文翻译自：CSS customized scroll bar in div

如何通过CSS（级联样式表）为一个div而非整个页面自定义滚动条？

---

#1楼

参考：https://stackoom.com/question/cohO/div中的CSS自定义滚动条

---

#2楼

I thought it would be helpful to consolidate the latest information on scroll bars, CSS, and browser compatibility. 我认为整合有关滚动条，CSS和浏览器兼容性的最新信息会有所帮助。

Scroll Bar CSS Support 滚动条CSS支持

Currently, there exists no cross-browser scroll bar CSS styling definitions. 当前，没有跨浏览器的滚动条CSS样式定义。 The W3C article I mention at the end has the following statement and was recently updated (10 Oct 2014): 最后，我在W3C文章中提到了以下内容，并于最近进行了更新（2014年10月10日）：

Some browsers (IE, Konqueror) support the non-standard properties 'scrollbar-shadow-color', 'scrollbar-track-color' and others. 某些浏览器（IE，Konqueror）支持非标准属性“ scrollbar-shadow-color”，“ scrollbar-track-color”等。 These properties are illegal: they are neither defined in any CSS specification nor are they marked as proprietary (by prefixing them with "-vendor-") 这些属性是非法的：它们既没有在任何CSS规范中定义，也没有被标记为专有（通过在它们前面加上“ -vendor-”）

Microsoft 微软

As others have mentioned, Microsoft supports scroll bar styling, but only for IE8 and above. 正如其他人提到的那样，Microsoft支持滚动条样式，但仅适用于IE8及更高版本。

Example: 例：

<!-- language: lang-css -->

    .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) Chrome和Safari（WebKit）

Similarly, WebKit now has its own version: 同样，WebKit现在具有自己的版本：

• Styling scrollbars: https://www.webkit.org/blog/363/styling-scrollbars/ 样式滚动条： https : //www.webkit.org/blog/363/styling-scrollbars/
• Demo of all WebKit scroll bar styling 所有WebKit滚动条样式的演示

• From Custom scrollbars in WebKit , relevant CSS: 从WebKit的自定义滚动条中 ，相关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（壁虎）

As of version 64 Firefox supports scrollbar styling through the properties scrollbar-color (partially, W3C draft ) and scrollbar-width ( W3C draft ). 从64版开始，Firefox通过属性scrollbar-color （部分为W3C draft ）和scrollbar-width （ W3C draft ）支持滚动条样式。 Some good information about the implementation can be found in this answer . 在此答案中可以找到有关实现的一些很好的信息。

Cross-browser Scroll Bar Styling 跨浏览器滚动条样式

JavaScript libraries and plug-ins can provide a cross-browser solution. JavaScript库和插件可以提供跨浏览器的解决方案。 There are many options. 有很多选择。

• 20 jQuery Scrollbar plugin with examples (July 24, 2012) 20个带有示例的jQuery Scrollbar插件 （2012年7月24日）
  • NiceScroll : jQuery Scrolling plugin for desktop,mobile & touch devices NiceScroll：适用于台式机，移动设备和触摸设备的jQuery滚动插件
  • jQuery custom content scroller jQuery自定义内容滚动条
  • Tiny Scrollbar – A lightweight jQuery plugin Tiny Scrollbar –轻巧的jQuery插件
  • etc. 等等
• 30+ JavaScript/Ajax Techniques for Sliders, Scrollers and Scrollbars (May 07, 2008) 滑块，滚动条和滚动条的30多种JavaScript / Ajax技术 （2008年5月7日）
• 21 Useful Scrollbar CSS/JavaScript Styling Tutorials (August, 2012) 21有用的滚动条CSS / JavaScript样式教程 （2012年8月）
• 15+ Free and Premium jQuery Scrolling Plugins (August 26, 2012) 15+个免费和高级jQuery滚动插件 （2012年8月26日）

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 . 万一您想防止没有以“ -vendor”为前缀的滚动条样式， W3C上的这篇文章将提供一些基本说明 。 Basically, you'll need to add the following CSS to a user style sheet associated with your browser. 基本上，您需要将以下CSS添加到与浏览器关联的用户样式表中。 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 CSS滚动条样式跨浏览器
• How to create a custom scrollbar on a div (Facebook style) 如何在div上创建自定义滚动条（Facebook风格）

Note: This answer contains information from various sources. 注意：此答案包含来自各种来源的信息。 If a source was used, then it is also linked in this answer. 如果使用了来源，则此答案中也将其链接。

---

#3楼

Webkit scrollbar doesnt support on most of the browers. Webkit滚动条不支持大多数浏览器。

Supports on CHROME 在CHROME上的支持

Here is a demo for webkit scrollbar Webkit Scrollbar DEMO 这是webkit滚动条的演示Webkit滚动条DEMO

If you are looking for more examples Check this More Examples 如果您正在寻找更多示例，请查看此更多示例

---

Another Method is Jquery Scroll Bar Plugin 另一种方法是Jquery滚动条插件

It supports on all browsers and easy to apply 它支持所有浏览器并且易于应用

Download the plugin from Download Here 从此处下载插件下载

How to use and for more options CHECK THIS 如何使用以及更多选项请检查此

DEMO 演示

---

#4楼

I tried a lot of plugins, most of them don't support all browsers, I prefer iScroll and nanoScroller works for all these browsers : 我尝试了很多插件，其中大多数不支持所有浏览器，我更喜欢iScroll和nanoScroller适用于所有这些浏览器：

• IE11 -> IE6 IE11-> IE6
• IE10 - WP8 IE10-WP8
• IE9 - WP7 IE9-WP7
• IE Xbox One IE Xbox One
• IE Xbox 360 IE Xbox 360
• Google Chrome 谷歌浏览器
• FireFox 火狐
• Opera 歌剧
• Safari 苹果浏览器

But iScroll do not work with touch! 但是 iScroll不能通过触摸操作！

demo iScroll : http://lab.cubiq.org/iscroll/examples/simple/ 演示iScroll ： http : //lab.cubiq.org/iscroll/examples/simple/
demo nanoScroller : http://jamesflorentino.github.io/nanoScrollerJS/ 演示nanoScroller ： http : //jamesflorentino.github.io/nanoScrollerJS/

---

#5楼

I tried a lot of JS and CSS scroll's and I found this was very easy to use and tested on IE and Safari and FF and worked fine 我尝试了很多JS和CSS滚动，发现它非常易于使用，并在IE，Safari和FF上进行了测试，并且工作正常

AS @thebluefox suggests AS @thebluefox建议

Here is how it works 下面是它的工作原理

Add the below script to the 将以下脚本添加到

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.ui.touch-punch.min.js"></script>

<script type="text/javascript" src="facescroll.js"></script>

<script type="text/javascript">
    jQuery(function(){ // on page DOM load
        $('#demo1').alternateScroll();
        $('#demo2').alternateScroll({ 'vertical-bar-class': 'styled-v-bar', 'hide-bars': false });  
    })
</script>

And this here in the paragraph where you need to scroll 而这在您需要滚动的段落中

<div id="demo1" style="width:300px; height:250px; padding:8px; resize:both; overflow:scroll">
**Your Paragraph Comes Here**
</div>

For more details visit the plugin page 有关更多详细信息，请访问插件页面

FaceScroll Custom scrollbar FaceScroll自定义滚动条

hope it help's 希望能帮助到你

---

#6楼

Give this a try 试试这个

Source : https://nicescroll.areaaperta.com/ 资料来源： https : //nicescroll.areaaperta.com/

Simple Implementation 简单实施

<script type="text/javascript">
 $(document).ready(

  function() { 

    $("html").niceScroll();

  }

);
</script>

It is a jQuery plugin scrollbar, so your scrollbars are controllable and look the same across the various OS's. 这是一个jQuery插件滚动条，因此您的滚动条是可控制的，并且在各种OS上看起来都是相同的。