京东商城网站建设,seo培训学院,中关村在线手机论坛,制作企业网站宣传图步骤简介
2018年9月#xff0c;W3C CSS滚动条定义了使用CSS自定义滚动条外观的规范。
截至2020年#xff0c;96%的互联网用户使用支持CSS滚动条样式的浏览器。但是#xff0c;您需要编写两套CSS规则来覆盖Blink和WebKit以及Firefox浏览器。
在本教程中#xff0c;您将学习如…简介
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-width和scrollbar-color属性的示例
body {scrollbar-width: thin; /* auto或thin */scrollbar-color: blue orange; /* 滚动条和跟踪的颜色 */
}以下是使用这些CSS规则生成的滚动条的屏幕截图
!使用蓝色滚动条和橙色跟踪的示例网页的滚动条屏幕截图。
这个规范与-webkit-scrollbar规范共享一些控制滚动条颜色的共同点。然而目前还不支持修改“跟踪滑块”的填充和圆角。
构建未来兼容的滚动条样式
您可以编写CSS以支持-webkit-scrollbar和CSS滚动条规范。
以下是一个使用scrollbar-width、scrollbar-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主题页面了解练习和编程项目。
