Html div中的CSS自定义滚动条

CSS customized scroll bar in div

提问by harisdev

How can I customize a scroll bar via CSS (Cascading Style Sheets) for one divand not the whole page?

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

回答by JSuar

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. The W3C articleI mention at the end has the following statement and was recently updated (10 Oct 2014):

目前，不存在跨浏览器滚动条 CSS 样式定义。我在最后提到的 W3C 文章有以下声明，并且最近更新（2014 年 10 月 10 日）：

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-")

一些浏览器（IE、Konqueror）支持非标准属性“scrollbar-shadow-color”、“scrollbar-track-color”等。这些属性是非法的：它们既没有在任何 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/
• 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
  

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

• 从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)

火狐（壁虎）

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.

从版本 64 开始，Firefox 支持通过属性scrollbar-color（部分为W3C 草稿）和scrollbar-width（W3C 草稿）来设置滚动条样式。在这个答案中可以找到一些关于实现的好信息。

Cross-browser Scroll Bar Styling

跨浏览器滚动条样式

JavaScript libraries and plug-ins can provide a cross-browser solution. There are many options.

JavaScript 库和插件可以提供跨浏览器的解决方案。有很多选择。

• 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.
• 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)

• 20 个带有示例的 jQuery 滚动条插件（2012 年 7 月 24 日）
  • NiceScroll：用于桌面、移动和触摸设备的 jQuery 滚动插件
  • jQuery 自定义内容滚动条
  • Tiny Scrollbar – 一个轻量级的 jQuery 插件
  • 等等。
• 用于滑块、滚动条和滚动条的 30 多种 JavaScript/Ajax 技术（2008 年 5 月 7 日）
• 21 个有用的滚动条 CSS/JavaScript 样式教程（2012 年 8 月）
• 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. 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.

以防万一您想阻止未正确添加“-vendor”前缀的滚动条样式，W3C 上的这篇文章提供了一些基本说明。基本上，您需要将以下 CSS 添加到与浏览器关联的用户样式表。这些定义将覆盖您访问的任何页面上的无效滚动条样式。

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 (Facebook style)

• 更改滚动条的样式
• CSS 滚动条样式跨浏览器
• 如何在 div 上创建自定义滚动条（Facebook 风格）

Note:This answer contains information from various sources. If a source was used, then it is also linked in this answer.

注意：此答案包含来自各种来源的信息。如果使用了一个来源，那么它也在这个答案中链接。

回答by Dilusha Gonagala

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 插件滚动条，因此您的滚动条是可控的，并且在各种操作系统上看起来都一样。

回答by elclanrs

Custom scroll bars aren't possible with CSS, you'll need some JavaScript magic.

CSS 无法实现自定义滚动条，您需要一些 JavaScript 魔法。

Some browsers support non-spec CSS rules, such as ::-webkit-scrollbarin Webkit but is not ideal since it'll only work in Webkit. IE had something like that too, but I don't think they support it anymore.

一些浏览器支持非规范 CSS 规则，例如::-webkit-scrollbar在 Webkit 中，但并不理想，因为它只能在 Webkit 中工作。IE 也有类似的东西，但我认为他们不再支持它了。

回答by ne1410s

Like many people, I was looking for something that was:

像许多人一样，我正在寻找的东西是：

• Consistently styled and functional across most modern browsers
• Not some ridiculous 3000-line bloated jQuery extension cr*p

• 在大多数现代浏览器中具有一致的样式和功能
• 不是一些荒谬的 3000 行臃肿的 jQuery 扩展 cr*p

...But alas - nothing!

......但唉——什么都没有！

Well if a job's worth doing... I was able to get something up and running in about 30 mins. Disclaimer: there's quite a few known (and probably a few as yet unknown) problems with it, but it makes me wonder what on Earth the other 2920 lines of JS are there for in many offerings!

好吧，如果一份工作值得做……我能够在大约 30 分钟内启动并运行一些东西。免责声明：它有很多已知的（可能还有一些未知的）问题，但这让我想知道在许多产品中其他 2920 行 JS 到底是做什么的！

var dragParams;
 window.addEventListener('load', init_myscroll);

 /* TODO: Much to do for v axis! */

 function bardrag_mousemove(e) {
   var pos = (e.clientX - dragParams.clientX) + dragParams.offsetLeft;
   pos = Math.min(Math.max(0, pos), dragParams.maxLeft);
   dragParams.slider.style.left = pos + 'px';
   updateScrollPosition(dragParams.slider, pos);
 }

 function updateScrollPosition(slider, offsetVal) {
   var bar = slider.parentNode;
   var myscroll = bar.parentNode;
   var maxView = myscroll.scrollWidth - myscroll.offsetWidth;
   var maxSlide = bar.offsetWidth - slider.offsetWidth;
   var viewX = maxView * offsetVal / maxSlide;
   myscroll.scrollLeft = viewX;
   bar.style.left = viewX + 'px';
 }

 function drag_start(e) {
   var slider = e.target;
   var maxLeft = slider.parentNode.offsetWidth - slider.offsetWidth;
   dragParams = {
     clientX: e.clientX,
     offsetLeft: slider.offsetLeft,
     slider: e.target,
     maxLeft: maxLeft
   };
   e.preventDefault();
   document.addEventListener('mousemove', bardrag_mousemove);
 }

 function drag_end(e) {
   e.stopPropagation();
   document.removeEventListener('mousemove', bardrag_mousemove);
 }

 function bar_clicked(e) {
   var bar = e.target;
   var slider = bar.getElementsByClassName('slider')[0];
   if (bar.className == 'h bar') {
     var maxSlide = bar.offsetWidth - slider.offsetWidth;
     var sliderX = e.offsetX - (slider.offsetWidth / 2);
     sliderX = Math.max(0, Math.min(sliderX, maxSlide));
     slider.style.left = sliderX + 'px';
     updateScrollPosition(slider, sliderX);
   }
 }

 function init_myscroll() {
   var myscrolls = document.getElementsByClassName('container');
   for (var i = 0; i < myscrolls.length; i++) {
     var myscroll = myscrolls[i];
     var style = window.getComputedStyle(myscroll);
     if (style.overflowY == 'scroll' || (style.overflowY == 'auto' && myscroll.offsetHeight < myscroll.scrollHeight)) {
       addScroller(false, myscroll);
     }
     if (style.overflowX == 'scroll' || (style.overflowX == 'auto' && myscroll.offsetWidth < myscroll.scrollWidth)) {
       addScroller(true, myscroll);
     }
   }
 }

 function addScroller(isX, myscroll) {
   myscroll.className += ' myscroll';
   var bar = document.createElement('div');
   var slider = document.createElement('div');
   var offsetDim = isX ? myscroll.offsetWidth : myscroll.offsetHeight;
   var scrollDim = isX ? myscroll.scrollWidth : myscroll.scrollHeight;
   var sliderPx = Math.max(30, (offsetDim * offsetDim / scrollDim));
   slider.style.width = 100 * sliderPx / offsetDim + '%';
   slider.className = 'slider';
   bar.className = isX ? 'h bar' : 'v bar';
   bar.appendChild(slider);
   myscroll.appendChild(bar);

   bar.addEventListener('click', bar_clicked);
   slider.addEventListener('mousedown', drag_start);
   slider.addEventListener('mouseup', drag_end);
   bar.addEventListener('mouseup', drag_end);
   document.addEventListener('mouseup', drag_end);
 }

body {
  background-color: #66f;
}
.container {
  background-color: #fff;
  width: 50%;
  margin: auto;
  overflow: auto;
}
.container > div:first-of-type {
  width: 300%;
  height: 100px;
  background: linear-gradient(to right, red, yellow);
}
/* TODO: Much to do for v axis! */

.myscroll {
  overflow: hidden;
  position: relative;
}
.myscroll .bar {
  background-color: lightgrey;
  position: absolute;
}
.myscroll {
  padding-bottom: 20px;
}
.myscroll .h {
  height: 20px;
  width: 100%;
  bottom: 0;
  left: 0;
}
.myscroll .slider {
  background-color: grey;
  position: absolute;
}
.myscroll .h .slider {
  height: 100%;
}

<div class="container">
  <div></div>
</div>

回答by ne1410s

Please check this link. Example with working demo

请检查此链接。工作演示示例

   #style-1::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: #F5F5F5;
}

#style-1::-webkit-scrollbar
{
    width: 12px;
    background-color: #F5F5F5;
}

#style-1::-webkit-scrollbar-thumb
{
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #555;
}

CSS Scroll Bars

CSS 滚动条

回答by Ouadie

I tried a lot of plugins, most of them don't support all browsers, I prefer iScrolland nanoScrollerworks for all these browsers :

我尝试了很多插件，其中大多数不支持所有浏览器，我更喜欢iScroll和nanoScroller适用于所有这些浏览器：

• IE11 -> IE6
• IE10 - WP8
• IE9 - WP7
• IE Xbox One
• IE Xbox 360
• Google Chrome
• FireFox
• Opera
• Safari

• IE11 -> IE6
• IE10 - WP8
• IE9 - WP7
• IE Xbox 一
• IE Xbox 360
• 谷歌浏览器
• 火狐
• 歌剧
• 苹果浏览器

ButiScroll do not work with touch!

但是iScroll 不支持触​​摸！

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

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

回答by Fatih Hayrio?lu

Firefox new version(64) support CSS Scrollbars Module Level 1

Firefox 新版本(64) 支持 CSS Scrollbars Module Level 1

.scroller {
  width: 300px;
  height: 100px;
  overflow-y: scroll;
  scrollbar-color: rebeccapurple green;
  scrollbar-width: thin;
}

<div class="scroller">
Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi
welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.
Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.
Dandelion cucumber earthnut pea peanut soko zucchini.
</div>

Source: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scrollbars

来源：https: //developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scrollbars

https://codepen.io/fatihhayri/pen/pqdrbd

https://codepen.io/fatihhayri/pen/pqdrbd

回答by csomakk

.className::-webkit-scrollbar {
  width: 10px;
  background-color: rgba(0,0,0,0);
}

.className::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.5);
  border-radius: 5px;
}

gave me a nice mobile/osx like one.

给了我一个不错的手机/osx。

回答by Denys Wessels

Here's a webkit example which works for Chrome and Safari:

这是一个适用于 Chrome 和 Safari 的 webkit 示例：

CSS:

CSS：

::-webkit-scrollbar 
{
    width: 40px;
    background-color:#4F4F4F;
}

::-webkit-scrollbar-button:vertical:increment 
{
    height:40px;
    background-image: url(/Images/Scrollbar/decrement.png);
    background-size:39px 30px;
    background-repeat:no-repeat;
}

::-webkit-scrollbar-button:vertical:decrement 
{
    height:40px;
    background-image: url(/Images/Scrollbar/increment.png);    
    background-size:39px 30px;
    background-repeat:no-repeat;
}

Output:

输出：

回答by le0diaz

This is what Google has used in some of its applications for a long time now. See in the code that, if you apply next classes, they somehow hide the scrollbar in Chrome, but it still works.

这是谷歌长期以来在其某些应用程序中使用的内容。在代码中看到，如果你应用下一个类，它们会以某种方式隐藏 Chrome 中的滚动条，但它仍然有效。

The classes are jfk-scrollbar, jfk-scrollbar-borderless, and jfk-scrollbar-dark

类是jfk-scrollbar, jfk-scrollbar-borderless, 和jfk-scrollbar-dark

.testg{ border:1px solid black;  max-height:150px;  overflow-y: scroll; overflow-x: hidden; width: 250px;}
.content{ height: 700px}

/* The google css code for scrollbars */
::-webkit-scrollbar {
    height: 16px;
    overflow: visible;
    width: 16px
}
::-webkit-scrollbar-button {
    height: 0;
    width: 0
}
::-webkit-scrollbar-track {
    background-clip: padding-box;
    border: solid transparent;
    border-width: 0 0 0 7px
}
::-webkit-scrollbar-track:horizontal {
    border-width: 7px 0 0
}
::-webkit-scrollbar-track:hover {
    background-color: rgba(0, 0, 0, .05);
    box-shadow: inset 1px 0 0 rgba(0, 0, 0, .1)
}
::-webkit-scrollbar-track:horizontal:hover {
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, .1)
}
::-webkit-scrollbar-track:active {
    background-color: rgba(0, 0, 0, .05);
    box-shadow: inset 1px 0 0 rgba(0, 0, 0, .14), inset -1px 0 0 rgba(0, 0, 0, .07)
}
::-webkit-scrollbar-track:horizontal:active {
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, .14), inset 0 -1px 0 rgba(0, 0, 0, .07)
}
.jfk-scrollbar-dark::-webkit-scrollbar-track:hover {
    background-color: rgba(255, 255, 255, .1);
    box-shadow: inset 1px 0 0 rgba(255, 255, 255, .2)
}
.jfk-scrollbar-dark::-webkit-scrollbar-track:horizontal:hover {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2)
}
.jfk-scrollbar-dark::-webkit-scrollbar-track:active {
    background-color: rgba(255, 255, 255, .1);
    box-shadow: inset 1px 0 0 rgba(255, 255, 255, .25), inset -1px 0 0 rgba(255, 255, 255, .15)
}
.jfk-scrollbar-dark::-webkit-scrollbar-track:horizontal:active {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), inset 0 -1px 0 rgba(255, 255, 255, .15)
}
::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .2);
    background-clip: padding-box;
    border: solid transparent;
    border-width: 0 0 0 7px;
    min-height: 28px;
    padding: 100px 0 0;
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset 0 -1px 0 rgba(0, 0, 0, .07)
}
::-webkit-scrollbar-thumb:horizontal {
    border-width: 7px 0 0;
    padding: 0 0 0 100px;
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px 0 0 rgba(0, 0, 0, .07)
}
::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, .4);
    box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25)
}
::-webkit-scrollbar-thumb:active {
    background-color: rgba(0, 0, 0, 0.5);
    box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.35)
}
.jfk-scrollbar-dark::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, .3);
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .15), inset 0 -1px 0 rgba(255, 255, 255, .1)
}
.jfk-scrollbar-dark::-webkit-scrollbar-thumb:horizontal {
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .15), inset -1px 0 0 rgba(255, 255, 255, .1)
}
.jfk-scrollbar-dark::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, .6);
    box-shadow: inset 1px 1px 1px rgba(255, 255, 255, .37)
}
.jfk-scrollbar-dark::-webkit-scrollbar-thumb:active {
    background-color: rgba(255, 255, 255, .75);
    box-shadow: inset 1px 1px 3px rgba(255, 255, 255, .5)
}
.jfk-scrollbar-borderless::-webkit-scrollbar-track {
    border-width: 0 1px 0 6px
}
.jfk-scrollbar-borderless::-webkit-scrollbar-track:horizontal {
    border-width: 6px 0 1px
}
.jfk-scrollbar-borderless::-webkit-scrollbar-track:hover {
    background-color: rgba(0, 0, 0, .035);
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .14), inset -1px -1px 0 rgba(0, 0, 0, .07)
}
.jfk-scrollbar-borderless.jfk-scrollbar-dark::-webkit-scrollbar-track:hover {
    background-color: rgba(255, 255, 255, .07);
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .25), inset -1px -1px 0 rgba(255, 255, 255, .15)
}
.jfk-scrollbar-borderless::-webkit-scrollbar-thumb {
    border-width: 0 1px 0 6px
}
.jfk-scrollbar-borderless::-webkit-scrollbar-thumb:horizontal {
    border-width: 6px 0 1px
}
::-webkit-scrollbar-corner {
    background: transparent
}
body::-webkit-scrollbar-track-piece {
    background-clip: padding-box;
    background-color: #f5f5f5;
    border: solid #fff;
    border-width: 0 0 0 3px;
    box-shadow: inset 1px 0 0 rgba(0, 0, 0, .14), inset -1px 0 0 rgba(0, 0, 0, .07)
}
body::-webkit-scrollbar-track-piece:horizontal {
    border-width: 3px 0 0;
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, .14), inset 0 -1px 0 rgba(0, 0, 0, .07)
}
body::-webkit-scrollbar-thumb {
    border-width: 1px 1px 1px 5px
}
body::-webkit-scrollbar-thumb:horizontal {
    border-width: 5px 1px 1px
}
body::-webkit-scrollbar-corner {
    background-clip: padding-box;
    background-color: #f5f5f5;
    border: solid #fff;
    border-width: 3px 0 0 3px;
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .14)
}
.jfk-scrollbar::-webkit-scrollbar {
    height: 16px;
    overflow: visible;
    width: 16px
}
.jfk-scrollbar::-webkit-scrollbar-button {
    height: 0;
    width: 0
}
.jfk-scrollbar::-webkit-scrollbar-track {
    background-clip: padding-box;
    border: solid transparent;
    border-width: 0 0 0 7px
}
.jfk-scrollbar::-webkit-scrollbar-track:horizontal {
    border-width: 7px 0 0
}
.jfk-scrollbar::-webkit-scrollbar-track:hover {
    background-color: rgba(0, 0, 0, .05);
    box-shadow: inset 1px 0 0 rgba(0, 0, 0, .1)
}
.jfk-scrollbar::-webkit-scrollbar-track:horizontal:hover {
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, .1)
}
.jfk-scrollbar::-webkit-scrollbar-track:active {
    background-color: rgba(0, 0, 0, .05);
    box-shadow: inset 1px 0 0 rgba(0, 0, 0, .14), inset -1px 0 0 rgba(0, 0, 0, .07)
}
.jfk-scrollbar::-webkit-scrollbar-track:horizontal:active {
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, .14), inset 0 -1px 0 rgba(0, 0, 0, .07)
}
.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-track:hover {
    background-color: rgba(255, 255, 255, .1);
    box-shadow: inset 1px 0 0 rgba(255, 255, 255, .2)
}
.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-track:horizontal:hover {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2)
}
.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-track:active {
    background-color: rgba(255, 255, 255, .1);
    box-shadow: inset 1px 0 0 rgba(255, 255, 255, .25), inset -1px 0 0 rgba(255, 255, 255, .15)
}
.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-track:horizontal:active {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), inset 0 -1px 0 rgba(255, 255, 255, .15)
}
.jfk-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .2);
    background-clip: padding-box;
    border: solid transparent;
    border-width: 0 0 0 7px;
    min-height: 28px;
    padding: 100px 0 0;
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset 0 -1px 0 rgba(0, 0, 0, .07)
}
.jfk-scrollbar::-webkit-scrollbar-thumb:horizontal {
    border-width: 7px 0 0;
    padding: 0 0 0 100px;
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px 0 0 rgba(0, 0, 0, .07)
}
.jfk-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, .4);
    box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25)
}
.jfk-scrollbar::-webkit-scrollbar-thumb:active {
    background-color: rgba(0, 0, 0, 0.5);
    box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.35)
}
.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, .3);
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .15), inset 0 -1px 0 rgba(255, 255, 255, .1)
}
.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-thumb:horizontal {
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .15), inset -1px 0 0 rgba(255, 255, 255, .1)
}
.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, .6);
    box-shadow: inset 1px 1px 1px rgba(255, 255, 255, .37)
}
.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-thumb:active {
    background-color: rgba(255, 255, 255, .75);
    box-shadow: inset 1px 1px 3px rgba(255, 255, 255, .5)
}
.jfk-scrollbar-borderless.jfk-scrollbar::-webkit-scrollbar-track {
    border-width: 0 1px 0 6px
}
.jfk-scrollbar-borderless.jfk-scrollbar::-webkit-scrollbar-track:horizontal {
    border-width: 6px 0 1px
}
.jfk-scrollbar-borderless.jfk-scrollbar::-webkit-scrollbar-track:hover {
    background-color: rgba(0, 0, 0, .035);
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .14), inset -1px -1px 0 rgba(0, 0, 0, .07)
}
.jfk-scrollbar-borderless.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-track:hover {
    background-color: rgba(255, 255, 255, .07);
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .25), inset -1px -1px 0 rgba(255, 255, 255, .15)
}
.jfk-scrollbar-borderless.jfk-scrollbar::-webkit-scrollbar-thumb {
    border-width: 0 1px 0 6px
}
.jfk-scrollbar-borderless.jfk-scrollbar::-webkit-scrollbar-thumb:horizontal {
    border-width: 6px 0 1px
}
.jfk-scrollbar::-webkit-scrollbar-corner {
    background: transparent
}
body.jfk-scrollbar::-webkit-scrollbar-track-piece {
    background-clip: padding-box;
    background-color: #f5f5f5;
    border: solid #fff;
    border-width: 0 0 0 3px;
    box-shadow: inset 1px 0 0 rgba(0, 0, 0, .14), inset -1px 0 0 rgba(0, 0, 0, .07)
}
body.jfk-scrollbar::-webkit-scrollbar-track-piece:horizontal {
    border-width: 3px 0 0;
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, .14), inset 0 -1px 0 rgba(0, 0, 0, .07)
}
body.jfk-scrollbar::-webkit-scrollbar-thumb {
    border-width: 1px 1px 1px 5px
}
body.jfk-scrollbar::-webkit-scrollbar-thumb:horizontal {
    border-width: 5px 1px 1px
}
body.jfk-scrollbar::-webkit-scrollbar-corner {
    background-clip: padding-box;
    background-color: #f5f5f5;
    border: solid #fff;
    border-width: 3px 0 0 3px;
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .14)
}

<div class="testg">
    <div class="content">
        Look Ma'  my scrollbars doesn't have arrows <br /><br />
        content, content, content <br /> content, content, content <br /> content, content, content s<br />  content, content, content <br/> content, content, content <br/> content, content, content d<br/>  content, content, content <br/> 
    </div>
</div>
<br/>
<div class="testg jfk-scrollbar jfk-scrollbar-borderless jfk-scrollbar-dark">
    <div class="content">
        Look Ma'  my scrollbars dissapear in chrome<br /><br />
        content, content, content <br /> content, content, content <br /> content, content, content s<br />  content, content, content <br/> content, content, content <br/> content, content, content d<br/>  content, content, content <br/> 
    </div>
</div>

http://jsfiddle.net/76kcuem0/32/

http://jsfiddle.net/76kcuem0/32/

I just found it useful to remove the arrows from the scrollbars. As of 2015 it's been used in Google Maps when searching for places in the list of results in its material design UI.

我刚刚发现从滚动条中删除箭头很有用。截至 2015 年，它已在 Google 地图中用于在其 Material Design UI 的结果列表中搜索地点。