非标准CSS属性定制基于webKit内核浏览器的滚动条

马黑黑

效果：

马黑黑

代码

<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>

马黑黑

以上效果仅对基于 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是滚动条轨道颜色

红影

有趣，这个不但加了滚动条，还有滚动条轨道呢

红影

儿子的background: linear-gradient(to top right,cyan,black);怪不得移动滚动条觉得背景色变化了

马黑黑

红影 发表于 2025-2-5 22:50
有趣，这个不但加了滚动条，还有滚动条轨道呢

滚动条本来就有轨道和滑块的，轨道底色默认银白色、滑块背景色默认灰色

马黑黑

红影 发表于 2025-2-5 22:51
儿子的background: linear-gradient(to top right,cyan,black);怪不得移动滚动条觉得背景色变化了

设置son子元素的背景色是为了翻页反馈。本来内容应该是一大堆的图文什么的

红影

马黑黑 发表于 2025-2-5 22:53
滚动条本来就有轨道和滑块的，轨道底色默认银白色、滑块背景色默认灰色

嗯，实际还能自己设定的，现在知道了

红影

马黑黑 发表于 2025-2-5 22:54
设置son子元素的背景色是为了翻页反馈。本来内容应该是一大堆的图文什么的

刚进帖子的时候，鼠标往下滑动，不小心碰到滚动条，还在奇怪为什么变色了，看了代码才知道

马黑黑

红影 发表于 2025-2-5 23:03
刚进帖子的时候，鼠标往下滑动，不小心碰到滚动条，还在奇怪为什么变色了，看了代码才知道

马黑黑

红影 发表于 2025-2-5 23:01
嗯，实际还能自己设定的，现在知道了

花飞飞

昨天只试到上下，没试到左右。。也只看到滚动条变色，没看到背景跟着变化。。
这个好看，居然跟扯动之后有渐变效果，看上去更豪华了。。

花飞飞

有了上下左右滚动条，是不是意味着音乐目录窗口的大小可以根据贴子要求随意定制。。
反正滚动即可看全。。

马黑黑

花飞飞 发表于 2025-2-6 16:40
有了上下左右滚动条，是不是意味着音乐目录窗口的大小可以根据贴子要求随意定制。。
反正滚动即可看全。。 ...

滚动条不应滥用，能避免尽量避免

马黑黑

花飞飞 发表于 2025-2-6 16:39
昨天只试到上下，没试到左右。。也只看到滚动条变色，没看到背景跟着变化。。
这个好看，居然跟扯动之后有 ...

这效果是里面的内容翻页了

红影

马黑黑 发表于 2025-2-5 23:46

这个滚动条还挺漂亮的

红影

马黑黑 发表于 2025-2-5 23:47

可以让隐藏的内容被拉出来。

马黑黑

红影 发表于 2025-2-6 18:41
这个滚动条还挺漂亮的

这个只是为了示范

马黑黑

红影 发表于 2025-2-6 18:42
可以让隐藏的内容被拉出来。

滚动条的作用就是让溢出的东东通过翻滚（页）可以呈现

红影

马黑黑 发表于 2025-2-6 19:52
这个只是为了示范

这个很好呢，知道了怎么去调整了