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

Ie11 -> ie6 Ie10 - wp8 Ie9 - wp7 IE Xbox One IE Xbox 360 谷歌Chrome 火狐 歌剧 Safari

但iScroll不工作与触摸!

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

我认为整合滚动条、CSS和浏览器兼容性方面的最新信息会很有帮助。

CSS支持滚动条

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

一些浏览器(IE, Konqueror)支持'scrollbar-shadow-color'， 'scrollbar-track-color'等非标准属性。这些属性是非法的:它们既没有在任何CSS规范中定义，也没有被标记为专有属性(通过在它们前面加上“-vendor-”)。

微软

正如其他人提到的，微软支持滚动条样式，但仅限于IE8及以上版本。

例子:

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

同样，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

Firefox(壁虎)

从版本64开始，Firefox通过属性scrollbar-color(部分，W3C草案)和scrollbar-width (W3C草案)支持滚动条样式化。在这个答案中可以找到一些关于实现的有用信息。

跨浏览器滚动条样式

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

20 jQuery滚动条插件示例(2012年7月24日) NiceScroll: jQuery滚动插件桌面，移动和触摸设备 jQuery自定义内容滚动 一个轻量级的jQuery插件 等。 30+ JavaScript/Ajax技术用于滑块，滚动条和滚动条(2008年5月7日) 21实用的滚动条CSS/JavaScript样式教程(2012年8月) 15+免费和高级jQuery滚动插件(2012年8月26日)

这样的例子不胜枚举。最好的办法是到处搜索、研究和测试可用的解决方案。我相信你一定能找到符合你需要的工作。

防止非法滚动条样式

为了防止滚动条样式没有正确地加上前缀“-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;
}

重复或相似的问题/上面没有链接的来源

改变滚动条的样式 CSS滚动条样式跨浏览器 如何在div上创建自定义滚动条(Facebook风格)

注意:这个答案包含了不同来源的信息。如果使用了一个源，那么它也会在这个答案中被链接。

试试吧

来源:https://nicescroll.areaaperta.com/

简单的实现

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

  function() { 

    $("html").niceScroll();

  }

);
</script>

它是一个jQuery插件滚动条，所以你的滚动条是可控的，在不同的操作系统上看起来是一样的。

或者像这样使用:

var MiniScroll=function(a,b){function e(){c.scrollUpdate()}function f(){var a=new Date,b=Math.abs(a-c.animation.frame),d=c.countScrollHeight();c.animation.frame=a,c.render(b),d.height!=c.controls.height&&(e(),c.controls.height=d.height),requestAnimationFrame(f)}function g(){c.scrollUpdate()}function h(a){var b=c.target.scrollTop,d=Math.abs(a.wheelDeltaY/(10-c.speed));c.target.scrollTop=a.wheelDeltaY>0?b-d:b+d,c.scrollUpdate()}function i(a){if(a.target.classList.contains("scroll"))return a.preventDefault(),!1;var b=c.countScrollHeight();c.target.scrollTop=a.offsetY*b.mul-parseInt(b.height)/2,c.scrollUpdate()}b=b||{};var c=this,d={speed:"speed"in b?b.speed:7};this.target=document.querySelector(a),this.animation={frame:new Date,stack:[]},this.identity="scroll"+parseInt(1e5*Math.random()),this.controls={place:null,scroll:null,height:0},this.speed=d.speed,this.target.style.overflow="hidden",this.draw(),requestAnimationFrame(f),this.target.onscroll=g,this.target.addEventListener("wheel",h),this.controls.place.onclick=i};MiniScroll.prototype.scrollUpdate=function(){this.controls.place.style.height=this.target.offsetHeight+"px";var a=this.countScrollHeight();this.controls.scroll.style.height=a.height,this.controls.scroll.style.top=a.top},MiniScroll.prototype.countScrollHeight=function(){for(var a=this.target.childNodes,b=parseInt(this.target.offsetHeight),c=0,d=0;d<a.length;d++)a[d].id!=this.identity&&(c+=parseInt(a[d].offsetHeight)||0);var e=this.target.offsetHeight*parseFloat(1/(parseFloat(c)/this.target.offsetHeight)),f=this.controls.place.offsetHeight*(this.target.scrollTop/c)+"px";return{mul:c/this.target.offsetHeight,height:e>b?b+"px":e+"px",top:f}},MiniScroll.prototype.draw=function(){var a=document.createElement("div"),b=document.createElement("div");a.className="scroll-place",b.className="scroll",a.appendChild(b),a.id=this.identity,this.controls.place=a,this.controls.scroll=b,this.target.insertBefore(a,this.target.querySelector("*")),this.scrollUpdate()},MiniScroll.prototype.render=function(a){for(var b=0;b<this.animation.stack.length;b++){var c=this.animation.stack[b],d=parseInt(c.target);c.element.style[c.prop]=d+c.points}};

并初始化:

<body onload="new MiniScroll(this);"></body>

和自定义:

.scroll-place { // ... // }
.scroll { // ... // }

这是谷歌在它的一些应用程序中使用了很长时间的方法。在代码中看到，如果你应用下一个类，他们以某种方式隐藏滚动条在Chrome，但它仍然工作。

这些类是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/

我发现从滚动条中移除箭头很有用。截至2015年，它被用于谷歌地图在其材料设计UI的结果列表中搜索位置。

对于仍然在寻找一个好的解决方案的人，我找到了这个插件simplebar

自定义滚动条香草javascript库与本机滚动，做简单，轻量级，易于使用和跨浏览器。

在我的情况下，我正在寻找reactJS的解决方案，作者还提供了react, angular, vue和下一个例子的包装器