如何解决具有边框半径的自定义滚动条
我正在尝试为我的网站制作一个自定义滚动条,边框半径为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创建自己的滚动条
对不起
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。