自定义滚动条的常用属性

最新推荐文章于 2024-05-20 14:58:04 发布

山顶洞人95277

最新推荐文章于 2024-05-20 14:58:04 发布

阅读量369

点赞数

本文链接：https://blog.csdn.net/weixin_44567226/article/details/89372277

版权

代码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>自定义滚动条的常用属性</title>
</head>
<style>
::-webkit-scrollbar {
  /*设置滚动条整体的属性,不对其进行设置自定义属性无法应用*/
  background-color: #F9F9F9;
}
::-webkit-scrollbar-thumb {
   /*设置滚动条滑块的属性*/
   border-radius: 1em; 
	background-color: #FF0000;
}
::-webkit-scrollbar-thumb:hover {
  /*设置滚动条滑块伪类的属性*/
  border-radius: 0em; 
  background-color: #427DAE;
}
::-webkit-scrollbar-track {
  background: transparent;
  background: #123456;
  border-radius: 0em; 
}
::-webkit-scrollbar-track:hover {
  /*设置滚动条背景伪类的属性*/
  background: rgba(110, 110, 110, 0.25);
  border-radius: 1em; 
}	
</style>

<body>
	<div style="height: 6000px;background: #666666;"></div>
</body>
</html>

正常样式和伪类样式效果图：
在这里插入图片描述
正常样式伪类样式