如何使用CSS样式化滚动条

简介: 如何使用CSS样式化滚动条

简介

2018年9月,W3C CSS滚动条定义了使用CSS自定义滚动条外观的规范。

截至2020年,96%的互联网用户使用支持CSS滚动条样式的浏览器。但是,您需要编写两套CSS规则来覆盖Blink和WebKit以及Firefox浏览器。

在本教程中,您将学习如何使用CSS自定义滚动条以支持现代浏览器。

先决条件

要跟随本文,您需要:

  • 熟悉供应商前缀、伪元素和优雅降级的概念。

在Chrome、Edge和Safari中设置滚动条样式

目前,使用供应商前缀伪元素-webkit-scrollbar可以为Chrome、Edge和Safari设置滚动条样式。

以下是一个使用::-webkit-scrollbar::-webkit-scrollbar-track::webkit-scrollbar-thumb伪元素的示例:

body::-webkit-scrollbar {
  width: 12px;               /* 整个滚动条的宽度 */
}
body::-webkit-scrollbar-track {
  background: orange;        /* 跟踪区域的颜色 */
}
body::-webkit-scrollbar-thumb {
  background-color: blue;    /* 滚动条的颜色 */
  border-radius: 20px;       /* 滚动条的圆角 */
  border: 3px solid orange;  /* 在滚动条周围创建填充 */
}

以下是使用这些CSS规则生成的滚动条的屏幕截图:

!使用蓝色滚动条和橙色跟踪的示例网页的滚动条屏幕截图。

这些代码适用于最新版本的Chrome、Edge和Safari。

不幸的是,这个规范已经被W3C正式放弃,并且可能会随着时间的推移被弃用。

在Firefox中设置滚动条样式

目前,使用新的CSS滚动条可以为Firefox设置滚动条样式。

以下是使用scrollbar-widthscrollbar-color属性的示例:

body {
  scrollbar-width: thin;          /* "auto"或"thin" */
  scrollbar-color: blue orange;   /* 滚动条和跟踪的颜色 */
}

以下是使用这些CSS规则生成的滚动条的屏幕截图:

!使用蓝色滚动条和橙色跟踪的示例网页的滚动条屏幕截图。

这个规范与-webkit-scrollbar规范共享一些控制滚动条颜色的共同点。然而,目前还不支持修改“跟踪滑块”的填充和圆角。

构建未来兼容的滚动条样式

您可以编写CSS以支持-webkit-scrollbarCSS滚动条规范。

以下是一个使用scrollbar-widthscrollbar-color::-webkit-scrollbar::-webkit-scrollbar-track::webkit-scrollbar-thumb的示例:

/* 适用于Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: blue orange;
}
/* 适用于Chrome、Edge和Safari */
*::-webkit-scrollbar {
  width: 12px;
}
*::-webkit-scrollbar-track {
  background: orange;
}
*::-webkit-scrollbar-thumb {
  background-color: blue;
  border-radius: 20px;
  border: 3px solid orange;
}

Blink和WebKit浏览器将忽略它们不认识的规则,并应用-webkit-scrollbar规则。Firefox浏览器将忽略它们不认识的规则,并应用CSS滚动条规则。一旦Blink和WebKit浏览器完全废弃-webkit-scrollbar规范,它们将优雅地回退到新的CSS滚动条规范。

结论

在本文中,您了解了如何使用CSS样式滚动条以及如何确保这些样式在大多数现代浏览器中被识别。

也可以通过隐藏默认滚动条并使用JavaScript检测高度和滚动位置来模拟滚动条。然而,这些方法在复制惯性滚动(例如通过触控板滚动时的衰减运动)方面存在局限性。

如果您想了解更多关于CSS的知识,请查看我们的CSS主题页面,了解练习和编程项目。


目录
相关文章
|
7月前
|
前端开发
CSS 滚动条样式修改
CSS 滚动条样式修改
79 0
|
前端开发
CSS div隐藏滚动条
CSS div隐藏滚动条
75 0
|
7月前
|
容器
mui.css 滚动条消失 导致超出部分无法显示 overflow属性
mui.css 滚动条消失 导致超出部分无法显示 overflow属性
69 0
|
5月前
|
前端开发
【UI】 elementui的dialog弹窗打开时CSS的BUG | 滚动条消失bug
【UI】 elementui的dialog弹窗打开时CSS的BUG | 滚动条消失bug
187 0
|
6月前
|
前端开发
CSS实现将垂直滚动条放置在左侧方法
CSS实现将垂直滚动条放置在左侧方法
193 2
|
7月前
|
前端开发 容器
如何用css给网页添加滚动条
如何用css给网页添加滚动条
104 2
|
7月前
|
前端开发 小程序
css div添加滚动条(附加源码)
css div添加滚动条(附加源码)
88 0
|
7月前
|
前端开发
CSS 隐藏滚动条
CSS 隐藏滚动条
49 0
|
JSON 前端开发 数据格式
CSS横向滚动条自定义样式
CSS横向滚动条自定义样式
219 0
|
JSON 前端开发 数据格式
CSS横向滚动条实现
CSS横向滚动条实现
85 0