模拟mac系统的滚动条样式,鼠标滚动显示,不滚动则消失。
import scrollSlot from '@/components/scroll-slot/scroll-slot.vue'
<scrollSlot width="100px">
<div style="height: 1000px;background-color: pink;"></div>
</scrollSlot>
<template>
<div
class="main-wrapper"
:class="{
'isScrolling': this.isScrolling
}"
ref="scrollWrap"
:style="{
'width': width,
'height': height,
...styleVal,
'--scrollbarSize': scrollbarSize+'px',
'--scrollbarThumbSize': (scrollbarSize-2)+'px'
}">
<slot></slot>
</div>
</template>
<script>
export default {
name: 'scroll-slot',
props: {
width: {
type: String,
default: '100%'
},
height: {
type: String,
default: '100%'
},
scrollbarSize: {
type: Number,
default: 10
}
},
data() {
return {
scrollWrap: null,
isScrolling: false,
};
},
computed: {
styleVal() {
return {
'--isScrolling': this.isScrolling ? 'block' : 'none',
}
}
},
mounted() {
this.scrollWrap = this.$refs['scrollWrap']
this.scrollWrap.addEventListener('scroll', this.handleScroll)
},
unmounted() {
this.scrollWrap.removeEventListener('scroll', this.handleScroll)
},
methods: {
handleScroll() {
// 当滚动时触发
this.isScrolling = true;
// 使用 setTimeout 在滚动停止后一段时间再隐藏滚动条
clearTimeout(this.scrollTimeout);
this.scrollTimeout = setTimeout(() => {
this.isScrolling = false;
}, 1000); // 调整这个时间以适应你的需求
},
},
}
</script>
<style lang="scss" scoped>
.main-wrapper {
overflow: overlay;
overflow-x: hidden;
&::-webkit-scrollbar {
display: none;
}
&.isScrolling, &:hover {
&::-webkit-scrollbar {
display: block;
width: var(--scrollbarSize);
height: var(--scrollbarSize);
}
&::-webkit-scrollbar-thumb {
border-radius: var(--scrollbarThumbSize);
border-style: dashed;
border-color: transparent;
background-color: rgba(37, 55, 92, 0.24);
background-clip: padding-box;
// display: var(--isScrolling);
}
&::-webkit-scrollbar-thumb:hover {
background: rgba(93, 105, 129, 0.48);
// display: var(--isScrolling);
}
}
}
</style>