在自己的css学习中，遇到了滚动条的问题，有时候滚动条会不合时宜的出现或消失，下面来对其的属性进行一下记录
滚动条简介
在默认情况下，当我们的页面里的内容堆叠后宽或高超出屏幕可显示的范围时，会出现滚动条，那么我们如何来修改它呢？下面我来简单介绍一下。
添加滚动条
想要修改滚动条，首先我们要有滚动条，那么我们如何来添加一个滚动条呢？首先我们要了解一下overflow属性。
overflow是 CSS 的简写属性，其设置了元素溢出时所需的行为——即当元素的内容太大而无法适应它的块级格式化上下文时。
其主要有如下属性值：
visible：内容不能被裁减并且可能渲染到边距盒的外部。
hidden：如果需要，内容将被裁减以适应边距盒。不提供滚动条，也不支持允许用户滚动（例如通过拖拽或者使用滚轮）。内容可以以编程的方式滚动（例如，通过设置scrollLeft等属性的值或scrollTo()方法）, 因此该元素仍然是一个滚动的容器。
clip：类似于hidden，内容将以元素的边距盒进行裁剪。clip和hidden之间的区别是clip关键字禁止所有滚动，包括以编程方式的滚动。该盒子不是一个滚动的容器。
auto：如果内容适应边距盒，它看起来与visible相同。如果内容溢出，则浏览器提供滚动条。
overlay：行为与auto相同，但是滚动条绘制在内容之上，而不是占据空间。(对火狐浏览器无效)
scroll：如果需要，内容将被裁减以适应边距盒。无论是否实际裁剪了任何内容，浏览器总是显示滚动条，以防止滚动条在内容改变时出现或者消失。打印机可能会打印溢出的内容。详情请看这里
所以由此我们可以知道，只有令overflow的值是auto、scroll或者overlay时才可能出现滚动条，在一般情况下，我们只有在内容溢出时才会需要滚动条，所以我们选用auto即可。
注意：除了overlay下，滚动条都是占据内容空间的，有些取消或出现滚动条的情况下(如文字输入框输入文字较多，或者为了悬浮页面出现防止用户滑动时)，会出现一些问题，需要提前考虑。
修改滚动条样式
现在有了滚动条，我们还可以对其样式进行修改，使其更贴合我们的设计风格，可以使用以下伪元素选择器去修改滚动条的样式。
::-webkit-scrollbar——整个滚动条。
::-webkit-scrollbar-button——滚动条上的按钮（上下箭头）。
::-webkit-scrollbar-thumb——滚动条上的滚动滑块。
::-webkit-scrollbar-track——滚动条轨道。
::-webkit-scrollbar-track-piece——滚动条没有滑块的轨道部分。
::-webkit-scrollbar-corner——当同时有垂直滚动条和水平滚动条时交汇的部分。通常是浏览器窗口的右下角。
::-webkit-resizer——出现在某些元素底角的可拖动调整大小的滑块。详细介绍和样例看这里
选中后我们便可以修改它们的宽、高、颜色、圆角等属性，使其改变为需要的样式。(注意：如果是水平滚动条，那么width属性不起作用，height可以设置滚动条的高度；如果是竖直滚动条，那么height高度不起作用，width可以用来设置滚动条的宽度。)
不过以上只对基于 Blink 或 WebKit 的浏览器上可用（例如，Chrome、Edge、Opera、Safari等）。
对于火狐浏览器，我们可以使用以下属性值来进行修改：
颜色使用scrollbar-color修改，其值包括：
dark显示黑色滚动条，可以是平台提供的滚动条的深色变体，也可以是带深色的自定义滚动条。auto在没有任何其他相关滚动条颜色属性的情况下，滚动条的轨道部分默认平台渲染。light显示一个轻量滚动条，可以是平台提供的滚动条的轻微变体，也可以是带有浅色的自定义滚动条。<color> <color>将第一种颜色应用于滚动条拇指，第二种颜色应用于滚动条轨道。
宽度使用scrollbar-width修改，其值包括：
auto系统默认的滚动条宽度thin系统提供的瘦滚动条宽度，或者比默认滚动条宽度更窄的宽度none不显示滚动条，但是该元素依然可以滚动
以上便是更改滚动条样式的主要方式。
