基于vue 的自定义滚动条
项目需要,自己开发了自定义滚动条,效果图看后面,还有很多不足,欢迎给出更优化的方案。
scrollContainer.vue
<template>
<div class="scrollbar-box" :style="{height: height}">
<div class="scrollbar-y">
<div ref="scrollRef" class="scroll-wrap" @scroll="onMosewheel">
<slot></slot>
</div>
<div v-show="heightPre < 1" ref="barRef" class="scrollbar-track">
<div
:style="{height: barHeight + 'px', transform: 'translateY(' + translateY + 'px)'}"
class="scrollbar-thumb"
@mousedown.stop.prevent="moveStart"
></div>
</div>
</div>
</div>
</template>
<script>
export default {
components: {
},
props: {
height: {
type: String,
default: '100%'
}
},
data() {
return {
isMove: false,
trackHeight: 0, // 滚动条轨道高度
wrapHeight: 0, // 容器高度(可视高度)
wrapContentHeight: 0, // 内容高度(可滚动内容的高度)
translateY: 0,
moveClientY: 0,
scrollTop: 0,
}
},
computed: {