css怎么设置网页下拉条(滚动条)样式?

很多朋友在网页设计中要自定义下拉条(滚动条)样式的情景,下拉条的样式我们可以通过css来控制的,下拉条能不能换颜色或者做的更好看一些呢?那么滚动条的设置都有哪些呢?下面本篇文章来介绍一下设置下拉条(滚动条)的方法。

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

scrollbar-face-color  :/*滑块颜色*/
scrollbar-arrow-color  :/*箭头颜色*/
scrollbar-shadow-color  :/*滑块边线颜色*/
scrollbar-track-color:/*滑轨颜色*/

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

1.png

CSS设置代码:

*{
scrollbar-face-color:#fff;/*滑块颜色*/ 
  scrollbar-arrow-color:#000; /*箭头颜色*/
  scrollbar-shadow-color:#000000; /*滑块边线颜色*/
  scrollbar-track-color:#dde3fa; /*滑轨颜色*/
}

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

2.png

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

3.png

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

::-webkit-scrollbar{}/*整体设置*/
::-webkit-scrollbar-track  /* 滚动条的滑轨背景颜色 */ 
 ::-webkit-scrollbar-thumb  /* 滑块颜色 */
 ::-webkit-scrollbar-button  /* 滑轨两头的监听按钮颜色 */ 
 ::-webkit-scrollbar-corner  /* 横向滚动条和纵向滚动条相交处尖角的颜色 */

使用伪元素设置CSS。

4.png

继续添加以下代码

::-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和谷哥类浏览器都能看到变化了。

5.png

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

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

html{
overflow-x:hidden;/*横向隐藏*/
overflow-y:hidden;/*纵向隐藏*/
}

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

注意事项

以上2种css对edge没有作用

其他浏览器可以使用一些插件也可以实现

更多web开发知识,请查阅 HTML中文网 !!

以上就是css怎么设置网页下拉条(滚动条)样式?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » CSS3 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏