参考：
- 自定义浏览器滚动条款式（兼容chrome和firefox）
- ::-webkit-scrollbar
- 【CSS】滚动条款式的优化
- 这个大略是批改滚动条款式办法最全的文章了
暗藏滚动条
先将元素设置为可滚动的：
div { height: 200px; overflow: scroll; //或auto}webkit写法：
div::-webkit-scrollbar { width: 0; height: 0; background-color: transparent;}// 或div::-webkit-scrollbar { display:none;}IE10+：
div { -ms-overflow-style: none; }Firefox：
div { scrollbar-width: none; }批改默认款式
webkit
webkit滚动条的选择器：
- ::-webkit-scrollbar——整个滚动条
- ::-webkit-scrollbar-button——滚动条上的按钮（高低箭头）
- ::-webkit-scrollbar-thumb——滚动条上的滚动滑块
- ::-webkit-scrollbar-track——滚动条轨道
- ::-webkit-scrollbar-track-piece——滚动条没有滑块的轨道局部
- ::-webkit-scrollbar-corner——当同时有垂直滚动条和程度滚动条时交汇的局部
- ::-webkit-resizer——右下角可拖动调整大小的滑块
比拟罕用的是批改宽度、圆角和色彩：
div::-webkit-scrollbar { width: 10px; } /* 滑块 */ div::-webkit-scrollbar-thumb { border-radius: 25px; background-color: rgb(81, 81, 255); } /* 轨道 */ div::-webkit-scrollbar-track { background-color: rgb(218, 255, 255); }还能够用伪类来更准确管制滚动条款式：
:horizontal
- 抉择程度方向的滚动条
:vertical
- 抉择垂直方向滚动条
:decrement
- 抉择上按钮（垂直滚动条）、左按钮（程度滚动条）
- 抉择滑块上方的轨道碎片(track piece)（垂直滚动条）、滑块左方的轨道碎片（程度滚动条）
:increment
- 与:decrement相同
:start
- 抉择滑块后方的按钮或轨道碎片(track piece)
:end
- 抉择滑块前方的按钮或轨道碎片(track piece)
:double-button
- 实用于按钮和轨道碎片
- 用于判断按钮是不是滚动条同一端的一对按钮中的一个，或轨道完结的地位是否是一对按钮
:single-button
- 实用于按钮和轨道碎片
- 判断按钮是滚动条一端的独立一个，或轨道完结的地位是否是一个独立按钮
:no-button
- 实用于轨道碎片，抉择滚动条两端没有按钮时的轨道碎片
:corner-present
- 是否存在滚动条角落
:window-inactive
- 焦点不在该窗口时
比方抉择滑块的上局部轨道：
div::-webkit-scrollbar-track-piece:start { }IE
IE浏览器的滚动条只能批改色彩，无奈扭转宽度等。它的选择器如下：
- scrollbar-3dlight-color：平面滚动条亮边的色彩
- scrollbar-3dshadow-color：平面滚动条暗影的色彩
- scrollbar-highlight-color：滚动条空白局部的色彩
- scrollbar-darkshadow-color：平面滚动条强暗影的色彩
- scrollbar-face-color: 平面滚动条的色彩
- scrollbar-arrow-color：三角箭头的色彩
- scrollbar-track-color：轨道色彩
- scrollbar-base-color：滚动条的根本色彩
Firefox
Firefox的滚动条只能批改宽度（属性scrollbar-width）和色彩（属性scrollbar-color）。
scrollbar-width值：
- auto：默认宽度
- thin：更窄的滚动条
- none：暗藏滚动条
scrollbar-color值：
- auto：默认色彩
- light：浅色滚动成果
- dark：深色滚动成果
具体色彩值，可传两个值，第一个滚轮色彩，第二个滚动条背景色
- 如scrollbar-color: red white;
JS实现滚动条
应用一个容器包裹内容和滚动条：
<div class="box-wrap"> <div class="box"> <div>content</div> <div>content</div> <div>content</div> <div>content</div> <div>content</div> <div>content</div> <div>content</div> <div>content</div> <div>content</div> <div>content</div> <div>content</div> <div>content</div> <div>content</div> <div>content</div> <div>content</div> <div>content</div> <div>content</div> </div> <div class="scroll"> <div class="scroll__thumb"></div> </div></div>款式上留神将滚动条暗藏，以及将滚动条定位到左边：
.box-wrap { position: relative; height: 400px; width: 400px;}.box { height: 100%; width: 100%; border: 1px solid rgb(52, 45, 45); overflow: scroll;}.box::-webkit-scrollbar{ display: none;}.box div { height: 50px;}.scroll { position: absolute; right: 0; top: 0; background-color: rgb(255, 218, 218); width: 15px; height: 100%;}.scroll__thumb { position: absolute; right: 0; top: 0; width: 100%; border-radius: 20px; background-color: brown;}js要点：
- 将内容元素高度比上它的滚动高度，失去滑块高度
- 监听滚动事件，挪动滑块
const boxWrap = document.querySelector('.box-wrap')const box = document.querySelector('.box')const thumb = document.querySelector('.scroll__thumb')const boxHeight = boxWrap.clientHeightconst contentHeight = box.scrollHeightconst persent = boxHeight / contentHeightthumb.style.height = persent*100 + '%';//滑块高度box.addEventListener('scroll', (e) => { thumb.style.transform = 'translateY(' + (e.target.scrollTop / boxHeight)*100 + '%)'})效果图：
这样只是简略实现了滚动成果，没有欠缺其余的性能比方滑块可拖动、高度不够时不显示滚动条等，懒人倡议应用封装好的插件。
滚动条插件mCustomScrollbar
插件的应用也很简略，间接在页面中引入它的js和css文件（文件下载地址）：
<link rel="stylesheet" href="/css/jquery.mCustomScrollbar.css" /><!--插件基于JQuery,因而也须要引入JQuery--><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><script src="/path/to/jquery.mCustomScrollbar.concat.min.js"></script>能够通过js初始化，或通过html上增加class，须要留神的是滚动元素应该具备高度，且overflow属性为hidden或auto：
(function($){ $(window).on("load",function(){ $(".content").mCustomScrollbar(); });})(jQuery);<!-- data-mcs-theme示意滚动条主题色彩 --><div class="mCustomScrollbar" data-mcs-theme="dark"> <!-- your content --></div>一些罕用配置：
// 设置程度、垂直，或同时两个方向的滚动条$(".content").mCustomScrollbar({ axis:"x" // 程度});$(".content").mCustomScrollbar({ axis:"y" // 垂直});$(".content").mCustomScrollbar({ axis:"yx" // 垂直、程度});// 设置主题$(".content").mCustomScrollbar({ theme:"dark" //默认light});// 滚动条地位$(".content").mCustomScrollbar({ scrollbarPosition: "inside" // 或"outside"});// 是否自动隐藏滚动条$(".content").mCustomScrollbar({ autoHideScrollbar: true});// 是否反对键盘按键滚动$(".content").mCustomScrollbar({ keyboard:{ enable: true }});//.......罕用办法：
// 滚动到某地位$(selector).mCustomScrollbar("scrollTo",position,options)// 例子$(selector).mCustomScrollbar("scrollTo","bottom",{ scrollInertia:3000, //持续时间 scrollEasing:"easeOut", //过渡成果});// 禁用滚动条 $(selector).mCustomScrollbar("disable")// 进行滚动事件$(selector).mCustomScrollbar("stop")如果想本人设置滚动条款式，能够通过自定义主题：
$(selector).mCustomScrollbar({ theme:"test"});mCustomScrollbar会给元素生成mCS-test（mCS-主题名称）的类，能够通过该类来管制款式：
.mCS-test.mCSB_scrollTools .mCSB_dragger { ......}.mCS-test.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ ......}.mCS-test.mCSB_scrollTools .mCSB_draggerRail{ ......} ......更多具体用法能够查看官网。