使用 CSS 的现代圆形滚动条实现
作者：互联网
您是否想知道如何为您正在设计的任何其他网站提供现代圆形滚动条？请继续阅读，了解如何实现类似于堆栈溢出、Outlook.com 和 DNAnalyzer.live 上的滚动条。
::-webkit-scrollbar是 CSS 中的一个伪元素，用于修改浏览器滚动条的外观。Chrome，Edge和Safari支持此标准，而Firefox不支持。
代码：
.CSS：
/* width */
/* set the width of the scrollbar */
::-webkit-scrollbar {
width: 10px;
}
/* Handle */
/* set the color of the scrollbar and the radius of its corners */
::-webkit-scrollbar-thumb {
background: rgb(150, 150, 150);
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
border-bottom-right-radius: 5px;
border-top-right-radius: 5px;
}
/* Handle on hover */
/* set the color of the scrollbar when hovered over */
::-webkit-scrollbar-thumb:hover {
background: rgb(131, 131, 131);
}
/* Handle on active */
/* set the color of the scrollbar when clicked */
::-webkit-scrollbar-thumb:active {
background: rgb(104, 104, 104);
}
模板目录：
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Rounded Scrollbar Example</h1>
<p>Filler text</p>
<p>Filler text</p>
<p>Filler text</p>
<p>Filler text</p>
<p>Filler text</p>
<p>Filler text</p>
<p>Filler text</p>
<p>Filler text</p>
<p>Filler text</p>
<p>Filler text</p>
<p>Filler text</p>
<p>Filler text</p>
<p>Filler text</p>
<p>Filler text</p>
<p>Filler text</p>
<p>Filler text</p>
<p>Filler text</p>
<p>Filler text</p>
<p>Filler text</p>
<p>Filler text</p>
<p>Filler text</p>
<p>Filler text</p>
<p>Filler text</p>
</body>
</html>