qier222
4 years ago
parent
226a2145c4
commit
7c79afd0d1
@ -0,0 +1,173 @@
|
||||
<template>
|
||||
<div>
|
||||
<transition name="fade">
|
||||
<div
|
||||
v-show="show"
|
||||
id="scrollbar"
|
||||
:class="{ 'on-drag': isOnDrag }"
|
||||
@click="handleClick"
|
||||
>
|
||||
<div
|
||||
id="thumbContainer"
|
||||
:class="{ active }"
|
||||
:style="thumbStyle"
|
||||
@mouseenter="handleMouseenter"
|
||||
@mouseleave="handleMouseleave"
|
||||
@mousedown="handleDragStart"
|
||||
@click.stop
|
||||
>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Scrollbar',
|
||||
data() {
|
||||
return {
|
||||
top: 0,
|
||||
thumbHeight: 0,
|
||||
active: false,
|
||||
show: false,
|
||||
hideTimer: null,
|
||||
isOnDrag: false,
|
||||
onDragClientY: 0,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
thumbStyle() {
|
||||
return {
|
||||
transform: `translateY(${this.top}px)`,
|
||||
height: `${this.thumbHeight}px`,
|
||||
};
|
||||
},
|
||||
main() {
|
||||
return this.$parent.$refs.main;
|
||||
},
|
||||
},
|
||||
|
||||
created() {
|
||||
this.$router.beforeEach((to, from, next) => {
|
||||
this.show = false;
|
||||
next();
|
||||
});
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleScroll() {
|
||||
const clintHeight = this.main.clientHeight - 128;
|
||||
const scrollHeight = this.main.scrollHeight - 128;
|
||||
const scrollTop = this.main.scrollTop;
|
||||
let top = ~~((scrollTop / scrollHeight) * clintHeight);
|
||||
let thumbHeight = ~~((clintHeight / scrollHeight) * clintHeight);
|
||||
|
||||
if (thumbHeight < 24) thumbHeight = 24;
|
||||
if (top > clintHeight - thumbHeight) {
|
||||
top = clintHeight - thumbHeight;
|
||||
}
|
||||
this.top = top;
|
||||
this.thumbHeight = thumbHeight;
|
||||
|
||||
if (!this.show && clintHeight !== thumbHeight) this.show = true;
|
||||
this.setScrollbarHideTimeout();
|
||||
},
|
||||
handleMouseenter() {
|
||||
this.active = true;
|
||||
},
|
||||
handleMouseleave() {
|
||||
this.active = false;
|
||||
this.setScrollbarHideTimeout();
|
||||
},
|
||||
handleDragStart(e) {
|
||||
this.onDragClientY = e.clientY;
|
||||
this.isOnDrag = true;
|
||||
this.$parent.userSelectNone = true;
|
||||
document.addEventListener('mousemove', this.handleDragMove);
|
||||
document.addEventListener('mouseup', this.handleDragEnd);
|
||||
},
|
||||
handleDragMove(e) {
|
||||
if (!this.isOnDrag) return;
|
||||
const clintHeight = this.main.clientHeight - 128;
|
||||
const scrollHeight = this.main.scrollHeight - 128;
|
||||
const clientY = e.clientY;
|
||||
const scrollTop = this.main.scrollTop;
|
||||
const offset = ~~(
|
||||
((clientY - this.onDragClientY) / clintHeight) *
|
||||
scrollHeight
|
||||
);
|
||||
this.top = ~~((scrollTop / scrollHeight) * clintHeight);
|
||||
this.main.scrollBy(0, offset);
|
||||
this.onDragClientY = clientY;
|
||||
},
|
||||
handleDragEnd() {
|
||||
this.isOnDrag = false;
|
||||
this.$parent.userSelectNone = false;
|
||||
document.removeEventListener('mousemove', this.handleDragMove);
|
||||
document.removeEventListener('mouseup', this.handleDragEnd);
|
||||
},
|
||||
handleClick() {
|
||||
this.main.scrollBy({
|
||||
top: 256,
|
||||
behavior: 'smooth',
|
||||
});
|
||||
},
|
||||
setScrollbarHideTimeout() {
|
||||
if (this.hideTimer !== null) clearTimeout(this.hideTimer);
|
||||
this.hideTimer = setTimeout(() => {
|
||||
if (!this.active) this.show = false;
|
||||
this.hideTimer = null;
|
||||
}, 4000);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
#scrollbar {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 16px;
|
||||
z-index: 1000;
|
||||
|
||||
#thumbContainer {
|
||||
margin-top: 64px;
|
||||
div {
|
||||
transition: background 0.4s;
|
||||
position: absolute;
|
||||
right: 2px;
|
||||
width: 8px;
|
||||
height: 100%;
|
||||
border-radius: 4px;
|
||||
background: rgba(128, 128, 128, 0.38);
|
||||
}
|
||||
}
|
||||
#thumbContainer.active div {
|
||||
background: rgba(128, 128, 128, 0.58);
|
||||
}
|
||||
}
|
||||
|
||||
[data-theme='dark'] {
|
||||
#thumbContainer div {
|
||||
background: var(--color-secondary-bg);
|
||||
}
|
||||
}
|
||||
|
||||
#scrollbar.on-drag {
|
||||
left: 0;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
.fade-enter,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue