码云笔记前端博客
Home > HTML/CSS > 纯css美化滚动条样式 -webkit-scrollbar

纯css美化滚动条样式 -webkit-scrollbar

2019-04-22 分类:HTML/CSS 作者:码云 阅读(4371)

本文共计1354个字,预计阅读时长需要4分钟。

滚动条对大家来说并不陌生,在日常前端开发中经常会遇到,如果我们用的是原汁原味的浏览器默认的样式,那将是对于我们美好的网页一个致命的打击,网页的颜值也会大打折扣的,所以这就导致我们在做web前端开发的时候,对滚动条的美化迫在眉睫,这也是今天为大家整理的内容。

那webkit浏览器是如何自定义滚动条的呢?

Webkit支持拥有overflow属性的区域,列表框,下拉菜单,textarea的滚动条自定义样式。当然,兼容所有浏览器的滚动条样式目前是不存在的。

1
2
3
4
5
6
7
::-webkit-scrollbar 滚动条整体部分
::-webkit-scrollbar-thumb 滚动条里面的小方块,能上下左右移动(取决于是垂直还是水平)
::-webkit-scrollbar-track 滚动条的轨道(里面装有thumb)
::-webkit-scrollbar-button 滚动条轨道两端的按钮,允许通过点击微调小方块的位置
::-webkit-scrollbar-track-piece 内层轨道,滚动条中间部分(除去)
::-webkit-scrollbar-corner 边角,及两个滚动条的交汇处
::-webkit-resizer 两个滚动条的交汇处上用于拖动调整元素大小的小控件

改变浏览器默认的滚动条样式:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
::-webkit-scrollbar-track-piece { //滚动条凹槽的颜色,还可以设置边框属性
background-color:#f8f8f8;
}
::-webkit-scrollbar {//滚动条的宽度
width:9px;
height:9px;
}
::-webkit-scrollbar-thumb {//滚动条的设置
background-color:#dddddd;
background-clip:padding-box;
min-height:28px;
}
::-webkit-scrollbar-thumb:hover {
background-color:#bbb;
}

当然有的小伙伴也想给特定的div模块修改滚动条的样式,也是so easy,比如我们给class名为test的添加滚动条样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.test::-webkit-scrollbar {
 width: 8px;
}
 .test::-webkit-scrollbar-track {
 background-color:red;
 -webkit-border-radius: 2em;
 -moz-border-radius: 2em;
 border-radius:2em;
}
 .test::-webkit-scrollbar-thumb {
 background-color:green;
 -webkit-border-radius: 2em;
 -moz-border-radius: 2em;
 border-radius:2em;
}

当然现在网上也有很多前端技术大牛制作的有关滚动条优化插件,都是很不错的,如果你想省事大家可以搜罗一下,如果你想做自己的网页滚动条风格,那你还是自己学习一下吧。以上就是今天关于滚动条的优化代码内容,希望对你有帮助,时间仓促,如果大家有什么问题,下方欢迎留言指正。

「除特别注明外,本站所有文章均为码云笔记原创,转载请保留出处!」

赞(16) 打赏

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

支付宝
微信
16

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

支付宝
微信

上一篇:

下一篇:

你可能感兴趣

共有 2 条评论 - 纯css美化滚动条样式 -webkit-scrollbar

  1. 鸭子包子 Linux Chrome 62.0.3202.84

    很实用

    1. 码云 Windows 7 Chrome 69.0.3497.100

      @鸭子包子谢谢

博客简介

码云笔记 mybj123.com,一个专注Web前端开发技术的博客,主要记录和总结博主在前端开发工作中常用的实战技能及前端资源分享,分享各种科普知识和实用优秀的代码,以及分享些热门的互联网资讯和福利!码云笔记有你更精彩!
更多博客详情请看关于博客

精彩评论

站点统计

  • 文章总数: 456 篇
  • 分类数目: 13 个
  • 独立页面: 8 个
  • 评论总数: 215 条
  • 链接总数: 15 个
  • 标签总数: 1009 个
  • 建站时间: 494 天
  • 访问总量: 8652507 次
  • 最近更新: 2019年10月21日