CSS 修改滚动条样式 隐藏浏览器滚动条

/* 滚动条整体部分 */
div::-webkit-scrollbar {} 

/* 滚动条里面的滑块 */
div::-webkit-scrollbar-thumb {}

/* 滚动条的轨道的两端按钮 */
div::-webkit-scrollbar-button {}

/* 滚动条的滑槽 */
div::-webkit-scrollbar-track {}
/* 滚动条没有滑块的滑槽部分 */
div::-webkit-scrollbar-track-piece {}

/* 边角，（横纵）两个滚动条的交汇处 */
div::-webkit-scrollbar-corner {}

/* 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件 */
div::-webkit-resizer {} 

注意这些属性只对webkit内核管用，兼容的方法:

1. 隐藏滚动条时，可以用一个色块通过定位盖上去
2. 将子级元素调大，父级元素使用overflow-hidden截掉滚动条部分。暴力且直接。

隐藏滚动条

body::-webkit-scrollbar { width: 0 !important; display: none; } // Chrome、Opera
body { -ms-overflow-style: none; } // 微软
body { overflow: -moz-scrollbars-none; } // Firefox