css滚动条设置

css滚动条设置

很多朋友在网页设计中要自定义滚动条样式的情景，滚动条的样式我们可以通过css来控制的，滚动条能不能换颜色或者做的更好看一些呢？那么滚动条的设置都有哪些呢？接下来小编就带你设置滚动条。

滚动条的设置在CSS中不能简简单单就完成，必竟它是由好多部分组成。所以我们如果想要设置滚动条就要先知道哪些是控制哪些部分的。下面一一介绍：

scrollbar-face-color ：/*滑块颜色*/

scrollbar-arrow-color：/*箭头颜色*/

scrollbar-shadow-color：/*滑块边线颜色*/

scrollbar-track-color：/*滑轨颜色*/

既然已经知道这些设置项，我们就可以着手去设置了。

CSS设置代码：

*{

scrollbar-face-color:#fff;/*滑块颜色*/

scrollbar-arrow-color:#000; /*箭头颜色*/

scrollbar-shadow-color:#000000; /*滑块边线颜色*/

scrollbar-track-color:#dde3fa; /*滑轨颜色*/

}

此设置对所有滚动条都有作用。

做网页设计有一个让人头疼的问题就是解决兼容性。刚刚我们是在IE11下进行的测试。做滚动条设置不能只针对IE浏览器来做，所以有必要再换浏览器测试试。这里小编使用谷哥做了一个测试，结果妥妥的没效果。

为了兼容其他浏览器还需要做一些功夫。这里针对webkit浏览器做一些设置。同样我们还是有必要先了解其属性：

::-webkit-scrollbar{}/*整体设置*/

::-webkit-scrollbar-track /* 滚动条的滑轨背景颜色 */

::-webkit-scrollbar-thumb /* 滑块颜色 */

::-webkit-scrollbar-button /* 滑轨两头的监听按钮颜色 */

::-webkit-scrollbar-corner /* 横向滚动条和纵向滚动条相交处尖角的颜色 */

使用伪元素设置CSS。

继续添加以下代码

::-webkit-scrollbar{background-color: #000}

::-webkit-scrollbar-track {

background-color: #7dc2f6;

}

::-webkit-scrollbar-thumb {

background-color: #1b99f7;

}

::-webkit-scrollbar-button {

background-color: #b9e0fd;

}

::-webkit-scrollbar-corner {

background-color: #018ef8;

}

再次测试输出，现在IE和谷哥类浏览器都能看到变化了。

接下来再看看如何隐藏滚动条。

对于浏览器滚动条而言如果同时隐藏横向和纵向滚动条可以直接使用overflow:hidden即可。如果单一方向隐藏，可以做单方向的隐藏。如：

html{

overflow-x:hidden;/*横向隐藏*/

overflow-y:hidden;/*纵向隐藏*/

}

好了滚动条设置就讲到这里了，你学会了吗？