css改火狐滚动条样式_如何用CSS修改浏览器滚动条的样式

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

首先介绍滚动条相关的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：他用来定义右下角滑块的样式

但是最常用的是滚动条整体部分(-webkit-scrollbar)，滑块(-webkit-scrollbar-thumb)以及外轨道(-webkit-scrollbar-track)三部分。

接下来我们将div盒子里面超出的部分隐藏，给div设置滚动条样式，看看怎么用CSS实现滚动条样式。

HTML部分：

haveaniceday

haveaniceday

haveaniceday

haveaniceday

haveaniceday

haveaniceday

haveaniceday

haveaniceday

haveaniceday

haveaniceday

haveaniceday

haveaniceday

haveaniceday

haveaniceday

haveaniceday

haveaniceday

haveaniceday

haveaniceday

haveaniceday

haveaniceday