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

Question

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

Answer 1

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

索引.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>

Answer 2

我发现使用预先构建的滚动条，我想要做的事情是不可能的。 为此，您需要将预制滚动条的透明度设置为 0 和 position: absolute，并使用 JS 创建自己的滚动条

对不起

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

问题描述

2 个解决方案

解决方案1
0 2020-08-20 23:08:09

解决方案2
0 2020-08-20 23:57:37

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

问题描述

2 个解决方案

解决方案1 0 2020-08-20 23:08:09

解决方案2 0 2020-08-20 23:57:37

解决方案1
0 2020-08-20 23:08:09

解决方案2
0 2020-08-20 23:57:37