::-webkit-scrollbar用于选中整个滚动条。::-webkit-scrollbar-track用于滚动条的轨道部分。::-webkit-scrollbar-thumb用于滚动条的滑块部分，可以设置背景色和其他样式。::-webkit-scrollbar-thumb:hover用于滚动条滑块在鼠标悬停时的样式。
实列：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
/* 容器的样式，例如一个具有滚动条的 div */
.scroll-container {
width: 300px;
height: 200px; /* 限制容器的高度，使得内容超出时出现滚动条 */
background-color: #888;
overflow-y: auto; /* 使得内容超出时显示垂直滚动条 */
}
/* 滚动条整体样式 */
.scroll-container::-webkit-scrollbar {
width: 10px; /* 滚动条的宽度 */
}
/* 滚动条轨道 */
.scroll-container::-webkit-scrollbar-track {
background: #f1f1f1; /* 轨道的背景色 */
}
/* 滚动条滑块 */
.scroll-container::-webkit-scrollbar-thumb {
background: #888; /* 滑块的背景色 */
border-radius: 5px; /* 滑块的圆角 */
}
/* 当鼠标悬停在滚动条上时滑块的样式 */
.scroll-container::-webkit-scrollbar-thumb:hover {
background: #555; /* 滑块的背景色 */
}
</style>
</head>
<body>
<div class="scroll-container">
<p>你好！我是一个p标签。</p>
<p>你好！我是一个p标签。</p>
<p>你好！我是一个p标签。</p>
<p>你好！我是一个p标签。</p>
<p>你好！我是一个p标签。</p>
<p>你好！我是一个p标签。</p>
<p>你好！我是一个p标签。</p>
<p>你好！我是一个p标签。</p>
<p>你好！我是一个p标签。</p>
<p>你好！我是一个p标签。</p>
<p>你好！我是一个p标签。</p>
<p>你好！我是一个p标签。</p>
<p>你好！我是一个p标签。</p>
<p>你好！我是一个p标签。</p>
<p>你好！我是一个p标签。</p>
<p>你好！我是一个p标签。</p>
<p>你好！我是一个p标签。</p>
<p>你好！我是一个p标签。</p>
<p>你好！我是一个p标签。</p>
<p>你好！我是一个p标签。</p>
<p>你好！我是一个p标签。</p>
<p>你好！我是一个p标签。</p>
<p>你好！我是一个p标签。</p>
<p>你好！我是一个p标签。</p>
<p>你好！我是一个p标签。</p>
<p>你好！我是一个p标签。</p>
<p>你好！我是一个p标签。</p>
<p>你好！我是一个p标签。</p>
</div>
</body>
</html>
扫一扫
1224
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
