用js修改网页滑动条圆角的代码
时间: 2023-12-10 12:06:01 浏览: 32
你可以通过CSS将滑动条的圆角进行修改,以下是一个例子:
```css
/* 隐藏原生滑动条 */
body::-webkit-scrollbar {
display: none;
}
/* 模拟自定义滑动条 */
.scrollbar {
width: 6px;
height: 100%;
background-color: #f5f5f5;
position: fixed;
right: 0;
top: 0;
z-index: 99999;
}
.scrollbar-thumb {
background-color: #ccc;
border-radius: 10px; /* 修改圆角大小 */
cursor: pointer;
height: 50px;
width: 100%;
}
/* 当鼠标悬浮在滑动条上时,显示指针 */
.scrollbar-thumb:hover {
background-color: #aaa;
}
```
然后你可以使用JavaScript来动态地添加和删除自定义滑动条,例如:
```js
// 创建自定义滑动条
const scrollbar = document.createElement('div');
scrollbar.classList.add('scrollbar');
const thumb = document.createElement('div');
thumb.classList.add('scrollbar-thumb');
scrollbar.appendChild(thumb);
document.body.appendChild(scrollbar);
// 删除自定义滑动条
document.body.removeChild(scrollbar);
```