CSS修改浏览器滚动条的样式（实例详解）

随着互联网的发展，人们对页面的要求越来越高，不只是功能好用，而且还要颜值高。前端开发人员对于浏览器的滚动条并不陌生，当自带的一些滚动条无法满足我们的审美时，你知道如何用CSS修改浏览器滚动条的样式吗？今天就给大家介绍如何设置div滚动条样式。有需要的小伙伴可以参考一下。

我们在自定义滚动条样式前，首先要了解滚动条的结构。通俗来讲，滚动条由两部分组成：一部分是可以滑动的部分，我们称它为滑块；另一部分是滚动条的轨道，也就是滑块的轨道，一般来说，为了美观，滑块的颜色要比轨道的颜色深一些。

首先介绍滚动条相关的CSS代码，以及他们的含义

> ::-webkit-scrollbar：指滚动条整体部分，它的属性有width,height,background等
> 
> ::-webkit-scrollbar-button ： 指滚动条两边的按钮。当不需要时可以用display:none将其隐藏
> 
> ::-webkit-scrollbar-track ：指外层轨道部分，当不需要时可以用display:none将其隐藏，也可以添加你想要的颜色
> 
> ::-webkit-scrollbar-track-piece ：指内层轨道部分，即滚动条中间的部分
> 
> ::-webkit-scrollbar-thumb ： 指滚动条里面可以拖动的部分，也就是滑块
> 
> ::-webkit-scrollbar-corner ：指边角部分
> 
> ::-webkit-resizer ：他用来定义右下角滑块的