使用 CSS 的现代圆形滚动条实现

2022-11-17 13:44:10 阅读：275 来源： 互联网

您是否想知道如何为您正在设计的任何其他网站提供现代圆形滚动条？请继续阅读，了解如何实现类似于堆栈溢出、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>

标签：CSS,处理器,编程,函数,运算,框架,代码,node,语法
来源：

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

使用 CSS 的现代圆形滚动条实现