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

问题描述

我正在尝试为我的网站制作一个自定义滚动条，边框半径为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

解决方法

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

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>

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

对不起

html scrollbar

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

问题描述

解决方法

相关问答