美化你的滚动条
实现步骤
- 首先是样式的修改
- 滚动开始和结束的监听
- 动画的实现
效果如下
##############################################################################################
1
首先是样式的修改
/* 设置滚动条整体部分的样式 */
::-webkit-scrollbar {
width: 0px;
height: 6px;
}
// /* 滚动槽--外层轨道 */
::-webkit-scrollbar-track {
background: transparent;
opacity: 0
}
/* 内层轨道（不包含滚动块部分） */
::-webkit-scrollbar-track-piece {
opacity: 0; /* 透明度设置为全透明，使得滚动条背景色为网页颜色 */
}
// /* 滚动条滑块 */
::-webkit-scrollbar-thumb {
border-radius: 3px;
// background: rgba(92, 110, 130, 0.1);
}
/* 滚动条按钮 */
::-webkit-scrollbar-button {
display: none;
}
/* 横向滚动条和纵向滚动条相交处尖角的颜色 */
::-webkit-scrollbar-corner {
background-color: transparent;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
滑动式高亮，结束滑动时取消高亮,这里用的是vue的 状态驱动的动态 CSS v-bind
加入动画，在尝试css动画不支持的情况下使用js动态修改样式
完整逻辑如下包含
- 如何判断滚动开始和结束
- 如何useRafFn控制动画
<script setup lang="ts">
import { useRafFn } from '@vueuse/core'
let bg = $ref('rgba(92, 110, 130, 0.05)')
let scrollOffset = $ref(0)
let timer: number
let scrollEndValue = $ref(0)
let opacity = $ref(0.5)
const { pause, resume } = useRafFn(() => {
opacity -= 0.01
bg = `rgba(92, 110, 130, ${opacity})`
if (opacity <= 0.05)
pause()
})
pause()
watch(() => [scrollOffset, scrollEndValue], ([newY, oldY], [endV, endOV]) => {
if (newY === endV) { bg = 'rgba(92, 110, 130, 0.05)' }
else {
opacity = 0.5
resume()
}
})
onMounted(() => {
document.querySelectorAll('.md pre[class*=language-]').forEach((pre) => {
pre.addEventListener('scroll', () => {
scrollOffset = pre.scrollLeft
clearTimeout(timer)
timer = window.setTimeout(() => {
scrollEndValue = pre.scrollLeft
}, 1000)
})
})
})
</script>
<style lang="scss">
.md pre[class*=language-] {
&::-webkit-scrollbar-thumb {
background: v-bind(bg);
}
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42