自定义滚动条样式vue组件

模拟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>