本文共 1737 字，大约阅读时间需要 5 分钟。

第一种

::-webkit-scrollbar {        display: none;    }

缺点：不通用，兼容性差。IE不兼容

第二种

/*webkit内核*/::-webkit-scrollbar {    width:0px;    height:0px;}::-webkit-scrollbar-button    {    background-color:rgba(0,0,0,0);}::-webkit-scrollbar-track     {    background-color:rgba(0,0,0,0);}::-webkit-scrollbar-track-piece {    background-color:rgba(0,0,0,0);}::-webkit-scrollbar-thumb{    background-color:rgba(0,0,0,0);}::-webkit-scrollbar-corner {    background-color:rgba(0,0,0,0);}::-webkit-scrollbar-resizer  {    background-color:rgba(0,0,0,0);}/*o内核*/.-o-scrollbar{    -moz-appearance: none !important;       background: rgba(0,255,0,0) !important;  }::-o-scrollbar-button    {    background-color:rgba(0,0,0,0);}::-o-scrollbar-track     {    background-color:rgba(0,0,0,0);}::-o-scrollbar-track-piece {    background-color:rgba(0,0,0,0);}::-o-scrollbar-thumb{    background-color:rgba(0,0,0,0);}::-o-scrollbar-corner {    background-color:rgba(0,0,0,0);}::-o-scrollbar-resizer  {    background-color:rgba(0,0,0,0);}/*IE10,IE11,IE12*/.box1{    -ms-scroll-chaining: chained;    -ms-overflow-style: none;    -ms-content-zooming: zoom;    -ms-scroll-rails: none;    -ms-content-zoom-limit-min: 100%;    -ms-content-zoom-limit-max: 500%;    -ms-scroll-snap-type: proximity;    -ms-scroll-snap-points-x: snapList(100%, 200%, 300%, 400%, 500%);    -ms-overflow-style: none;    overflow: auto;}$(function(){    //FF下用JS实现自定义滚动条    $(".box1").niceScroll({cursorborder:"",cursorcolor:"rgba(0,0,0,0)",boxzoom:true});})

参数说明：

1. ::-webkit-scrollbar 滚动条整体部分，可以设置宽度等
2. ::-webkit-scrollbar-button 滚动条两端的按钮
3. ::-webkit-scrollbar-track  外层轨道
4. ::-webkit-scrollbar-track-piece  内层滚动槽
5. ::-webkit-scrollbar-thumb 滚动的滑块
6. ::-webkit-scrollbar-corner 边角
7. ::-webkit-resizer 定义右下角拖动块的样式

转载地址：http://jchwi.baihongyu.com/