我想用 CSS 将 Border-Radius 应用于滚动条

Posted 2023-02-19

【中文标题】我想用 CSS 将 Border-Radius 应用于滚动条

【英文标题】：i want to Apply Border-Radius To Scrollbars with CSS

【发布时间】：2022-01-23 17:54:34

【问题描述】：

我有一个带有此滚动条的 div see the image here

但我想要这种类型的滚动用于我的 div see the image here

【参考方案1】：

我不确定是否所有网络浏览器的反应方式都相同，但您可以试试这个：

<style>
/* width */
::-webkit-scrollbar 
  width: 20px;


/* Track */
::-webkit-scrollbar-track 
  box-shadow: inset 0 0 5px grey; 
  border-radius: 10px;

 
/* Handle */
::-webkit-scrollbar-thumb 
  background: red; 
  border-radius: 10px;


/* Handle on hover */
::-webkit-scrollbar-thumb:hover 
  background: #b30000; 

</style>

来源：https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_custom_scrollbar2

【讨论】：

但是当我应用这个解决方案时箭头是隐藏的。

你也可以看看这个帖子：***.com/questions/47576815/…

【参考方案2】：

您可以查看以下网址 https://www.w3schools.com/howto/howto_css_custom_scrollbar.asp