非标准CSS属性定制基于webKit内核浏览器的滚动条
<h2>效果：</h2><style>
#pa {
width: 600px;
height: 400px;
overflow: auto;
}
/* 滚动条厚度 : width、height分别针对纵向、横向滚动条 */
#pa::-webkit-scrollbar {
width: 10px;
height: 10px;
}
/* 滚动条滑块样式 */
#pa::-webkit-scrollbar-thumb {
background: cyan;
border-radius: 5px;
box-shadow: inset 0 0 6px #000;
}
/* 滚动条轨道样式 */
#pa::-webkit-scrollbar-track {
border-radius: 10px;
background-color: rgba(0,100,100,.5);
}
/* 子元素 ：高宽均设置为大于父元素以便令父元素呈现滚动条 */
#son {
width: 200%;
height: 300%;
background: linear-gradient(to top right,cyan,black);
}
</style>
<div id="pa">
<div id="son"></div>
</div>
本帖最后由 马黑黑 于 2025-2-5 22:10 编辑 <br /><br /><h2>代码</h2>
<div id="hEdiv"><pre id="hEpre">
<style>
#pa {
width: 600px;
height: 400px;
overflow: auto;
}
/* 滚动条厚度 : width、height分别针对纵向、横向滚动条 */
#pa::-webkit-scrollbar {
width: 10px;
height: 10px;
}
/* 滚动条滑块样式 */
#pa::-webkit-scrollbar-thumb {
background: cyan;
border-radius: 5px;
box-shadow: inset 0 0 6px #000;
}
/* 滚动条轨道样式 */
#pa::-webkit-scrollbar-track {
border-radius: 10px;
background-color: rgba(0,100,100,.5);
}
/* 子元素 ：高宽均设置为大于父元素以便令父元素呈现滚动条 */
#son {
width: 200%;
height: 300%;
background: linear-gradient(to top right,cyan,black);
}
</style>
<div id="pa">
<div id="son"></div>
</div>
</pre></div>
<script type="module">
import hlight from 'https://638183.freep.cn/638183/web/mod/helight.js';
hlight.hl(hEdiv, hEpre);
</script> 以上效果仅对基于 webKit 内核浏览器如 Chrome、Safari 等有效。
如果使用标准属性定制滚动条样式，其实就两三句代码，不过效果没那么丰富：在需要出现滚动条的元素加入——
overflow: auto;
scrollbar-width: thin;
scrollbar-color: teal rgba(255,255,255,.2);
其中:
overflow 属性，设为 auto 表示，当其内内容溢出时出现滚动条。可选值还有 hidden（隐藏）等；
scrollbar-width 属性设为 thin，表示竖向滚动条厚度为细小型。可选值还有 none（不出现滚动条）、auto（按浏览器预设大小）；
scrollbar-color 属性设置滚动条颜色，需要两个颜色值，值1是滑块颜色，值2是滚动条轨道颜色 有趣，这个不但加了滚动条，还有滚动条轨道呢{:4_187:} 儿子的background: linear-gradient(to top right,cyan,black);怪不得移动滚动条觉得背景色变化了{:4_173:} 红影 发表于 2025-2-5 22:50
有趣，这个不但加了滚动条，还有滚动条轨道呢
滚动条本来就有轨道和滑块的，轨道底色默认银白色、滑块背景色默认灰色 红影 发表于 2025-2-5 22:51
儿子的background: linear-gradient(to top right,cyan,black);怪不得移动滚动条觉得背景色变化了
设置son子元素的背景色是为了翻页反馈。本来内容应该是一大堆的图文什么的 马黑黑 发表于 2025-2-5 22:53
滚动条本来就有轨道和滑块的，轨道底色默认银白色、滑块背景色默认灰色
嗯，实际还能自己设定的，现在知道了{:4_187:} 马黑黑 发表于 2025-2-5 22:54
设置son子元素的背景色是为了翻页反馈。本来内容应该是一大堆的图文什么的
刚进帖子的时候，鼠标往下滑动，不小心碰到滚动条，还在奇怪为什么变色了，看了代码才知道{:4_204:} 红影 发表于 2025-2-5 23:03
刚进帖子的时候，鼠标往下滑动，不小心碰到滚动条，还在奇怪为什么变色了，看了代码才知道
{:4_189:} 红影 发表于 2025-2-5 23:01
嗯，实际还能自己设定的，现在知道了
{:4_181:} 昨天只试到上下，没试到左右。。也只看到滚动条变色，没看到背景跟着变化。。
这个好看，居然跟扯动之后有渐变效果，看上去更豪华了。。{:4_173:} 有了上下左右滚动条，是不是意味着音乐目录窗口的大小可以根据贴子要求随意定制。。
反正滚动即可看全。。{:4_173:} 花飞飞 发表于 2025-2-6 16:40
有了上下左右滚动条，是不是意味着音乐目录窗口的大小可以根据贴子要求随意定制。。
反正滚动即可看全。。 ...
滚动条不应滥用，能避免尽量避免 花飞飞 发表于 2025-2-6 16:39
昨天只试到上下，没试到左右。。也只看到滚动条变色，没看到背景跟着变化。。
这个好看，居然跟扯动之后有 ...
这效果是里面的内容翻页了 马黑黑 发表于 2025-2-5 23:46
这个滚动条还挺漂亮的{:4_187:} 马黑黑 发表于 2025-2-5 23:47
可以让隐藏的内容被拉出来。 红影 发表于 2025-2-6 18:41
这个滚动条还挺漂亮的
这个只是为了示范 红影 发表于 2025-2-6 18:42
可以让隐藏的内容被拉出来。
滚动条的作用就是让溢出的东东通过翻滚（页）可以呈现 马黑黑 发表于 2025-2-6 19:52
这个只是为了示范
这个很好呢，知道了怎么去调整了{:4_187:}