html - 带有边框半径的自定义滚动条
问题描述
我正在尝试为我的网站制作一个边框半径为 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
页面设置。它将删除滚动的白角。
索引.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>
推荐阅读
- python - 如何为隐马尔可夫模型找到最可能的隐藏状态序列
- c++ - 计算 2 的极大幂的有效方法
- cassandra-2.0 - 为什么插入和选择查询的结果集不同
- javascript - “语法错误:意外令牌'let'的问题
- android - Android 动态功能模块作为子模块
- html - 在移动屏幕上触摸视频预览时防止链接锚重定向
- python - 从列表创建嵌套字典的函数
- datetime - 在 Dart 中获取当前日期
- ios - 使用 JWVideoView 在 UICollectionViewCell 上崩溃 - Swift
- java - 将文件 utf8 转换为 utf16 java