|
|
https://www.huachaowang.com/forum.php?mod=viewthread&tid=91108&pid=2532000&page=1&extra=#pid2532000
浏览器的滚动条一直以来都是“灰滑块+白轨道”的固定样子。一直以来也都有人对其样式甚为不满，企图通过设置浏览器的私有属性等方式去改变浏览器滚动条的外观。现在，现代浏览器已经逐步支持标准的滚动条CSS样式定制，主要有两个属性： scrollbar-color 和 scrollbar-width，前者用于设置滚动条滑块和轨道颜色，后者用于设置滚动条的厚度。 🔷 支持 scrollbar-color/width 浏览器版本Chrome 121+
Edge 121+
Firefox 64+
Safri 26.2+
🔷 语法/* css语法 */
scrollbar-color: color1 color2; /* 滑块颜色 轨道颜色 */
scrollbar-width: auto; /* auto | thin | none */
🔷 示例一 ：web页滚动条<style> /* 页面滚动条设置 */
html {
scrollbar-color: rebeccapurple beige; /* 滑块+轨道颜色 */
scrollbar-width: thin; /* auto | thin | none */ }
/* 设置一个元素令页面出现滚动条 */
.sDiv {
width: 200vh;
height: 400vw; }
</style><div class="sDiv"></div>
示例二 ：元素滚动条<style> /* 主元素 ：固定尺寸、使用滚动条 */
.mum {
margin: 20px auto;
width: 800px;
height: 600px;
border: 1px solid rebeccapurple;
overflow: auto; /* 关键 ：是否使用滚动条*/
scrollbar-width: thin; /* 滚动条厚度 */
scrollbar-color: yellow lightblue; /* 滚动条颜色 */ }
/* 子元素 ：用于撑大空间 */
.son {
width: 3200px;
height: 2400px;
background: linear-gradient(to bottom right, pink, lightblue, purple, gold);
}
</style>
<div class="mum">
<div class="son"></div></div>是否使用自定义滚动条，取决于开发者喜好与业务需求。
|
|
|
发表于