自定义Webkit内核浏览器滑动条样式

最新推荐文章于 2024-03-27 10:30:00 发布

转载最新推荐文章于 2024-03-27 10:30:00 发布 · 77 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/tsai/blog/69191

本文介绍了如何利用Webkit内核浏览器的特性来自定义滚动条样式。通过CSS伪元素选择器，可以对滚动条的各个部分进行精细控制，实现美观且符合需求的设计效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

为什么80%的码农都做不了架构师？>>>

最近看Google新闻发现其右侧的滑动条十分清爽，以为是Google自己实现的（Google的创新能力是无限的！），搜索相关资料发现是Webkit内核浏览器的一个样式特性，并且可以自定义样式。以下是Google官方定义的滑动条样式：

::-webkit-scrollbar {
	height: 16px;
	overflow: visible;
	width: 16px;
}
::-webkit-scrollbar-thumb {
	background-color: rgba(0, 0, 0, .2);
	background-clip: padding-box;
	border: solid transparent;
	border-width: 1px 1px 1px 6px;
	min-height: 28px;
	padding: 100px 0 0;
	box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset 0 -1px 0 rgba(0, 0, 0, .07);
}
::-webkit-scrollbar-thumb:hover{
	background-color:#808181;   
    -webkit-border-radius:4px; 
}
::-webkit-scrollbar-button {
	height: 0;
	width: 0;
}
::-webkit-scrollbar-track {
	background-clip: padding-box;
	border: solid transparent;
	border-width: 0 0 0 4px;
}
::-webkit-scrollbar-corner {
	background: transparent;
}

转载于:https://my.oschina.net/tsai/blog/69191