CSS滚动条scrollbar
# 滚动条样式
# 仿mac
body{
margin: 0;
overflow: overlay;
}
::-webkit-scrollbar{
background-color: transparent;
width: 12px;
}
::-webkit-scrollbar-thumb{
background-color: transparent;
border-radius: 8px;
background-clip: content-box;
border: 2px solid transparent;
}
body[scroll]::-webkit-scrollbar-thumb,
::-webkit-scrollbar-thumb:hover{
background-color: rgba(0,0,0,.5);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
window.addEventListener('scroll', function(ev) {
document.body.toggleAttribute('scroll', true)
this.timer && clearTimeout(this.timer)
this.timer = setTimeout(() => {
document.body.toggleAttribute('scroll')
}, 500)
})
1
2
3
4
5
6
7
2
3
4
5
6
7
# 给table的tbody添加滚动条
table tbody {
height: 200px;
overflow-y: auto;
display: block;
}
table thead,
tbody tr {
display: table;
width: 100%;
}
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
编辑 (opens new window)
上次更新: 2023/09/17, 23:41:49