带有边框半径的自定义滚动条答案

【问题标题】：custom scroll bar with border-radius带有边框半径的自定义滚动条
【发布时间】：2020-12-10 07:18:06
【问题描述】：

我正在尝试为我的网站制作一个自定义滚动条，其边框半径为 20 像素，并且我的网站有一个图像背景（在图片中我使用的是黑色占位符图像），但有一个空间是白色的滚动条的顶部和底部我想弄清楚如何删除这里的空白是 CSS

  background-color:darkred;
  text-align:center;
  border:6px ridge red;
  width:200px;
  margin:auto;
}html{
  margin:auto;
  background-image:url('https://www.ledr.com/colours/black.jpg') 
   
}
::-webkit-scrollbar {
  width: 20px;
}

/* Track */
::-webkit-scrollbar-track {
  background-color:red; 
  border:1px solid black;
    border-radius:20px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background-color:lightgreen; 
  border:1px solid black;
  border-radius:20px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background-color:green;  
  background-size:100px;
} ```
[image of the scroll bar and white part I'm trying to get rid of][1]


  [1]: https://i.stack.imgur.com/XU20A.jpg

【问题讨论】：

抱歉链接失效i.stack.imgur.com/XU20A.jpg

标签： html css scrollbar

【解决方案1】：

您可以为您的html 页面设置background-color: #000;。它将删除滚动的白角。

index.html

<!DOCTYPE html>
<html>

<head>
    <title>Test</title>
    <meta charset="UTF-8">
    <style>
        html {
            background-color: #000;
            color: aliceblue;
            margin: auto;
            background-image: url('https://www.ledr.com/colours/black.jpg')
        }

        ::-webkit-scrollbar {
            width: 20px;
        }

        /* Track */
        ::-webkit-scrollbar-track {
            background-color: red;
            border: 1px solid black;
            border-radius: 20px;
        }

        /* Handle */
        ::-webkit-scrollbar-thumb {
            background-color: lightgreen;
            border: 1px solid black;
            border-radius: 20px;
        }

        /* Handle on hover */
        ::-webkit-scrollbar-thumb:hover {
            background-color: green;
            background-size: 100px;
        }
    </style>
</head>

<body>
    <p>My text</p>
    <p>My text</p>
    <p>My text</p>
    <p>My text</p>
    <p>My text</p>
    <p>My text</p>
    <p>My text</p>
    <p>My text</p>
    <p>My text</p>
    <p>My text</p>
    <p>My text</p>
    <p>My text</p>
    <p>My text</p>
    <p>My text</p>
    <p>My text</p>
    <p>My text</p>
    <p>My text</p>
    <p>My text</p>
    <p>My text</p>
    <p>My text</p>
    <p>My text</p>
    <p>My text</p>
    <p>My text</p>
    <p>My text</p>
    <p>My text</p>
    <p>My text</p>
    <p>My text</p>
    <p>My text</p>
    <p>My text</p>
    <p>My text</p>
    <p>My text</p>
    <p>My text</p>
    <p>My text</p>
    <p>My text</p>
    <p>My text</p>
    <p>My text</p>
    <p>My text</p>
    <p>My text</p>
    <p>My text</p>
    <p>My text</p>
    <p>My text</p>
    <p>My text</p>
    <p>My text</p>
    <p>My text</p>
    <p>My text</p>
    <p>My text</p>
    <p>My text</p>
    <p>My text</p>
    <p>My text</p>
    <p>My text</p>
    <p>My text</p>
    <p>My text</p>
    <p>My text</p>
    <p>My text</p>
    <p>My text</p>
    <p>My text</p>
    <p>My text</p>
    <p>My text</p>
    <p>My text</p>
    <p>My text</p>
    <p>My text</p>
    <p>My text</p>
    <p>My text</p>
    <p>My text</p>
    <p>My text</p>
    <p>My text</p>
    <p>My text</p>
    <p>My text</p>
    <p>My text</p>
    <p>My text</p>
    <p>My text</p>
    <p>My text</p>
    <p>My text</p>
    <p>My text</p>
    <p>My text</p>
    <p>My text</p>
    <p>My text</p>

</body>

</html>

【讨论】：

这并没有解决它，因为我使用的是图像黑色只是一个占位符图像
在这种情况下你能分享你的完整代码吗？与真实图像？（问题中的代码看起来不完整）

【解决方案2】：

我发现使用预先构建的滚动条是不可能的。为此，您需要将预制滚动条的透明度设置为 0 和位置：绝对，并使用 JS 创建自己的滚动条

对不起

【讨论】：