56 lines
1.3 KiB
Vue
56 lines
1.3 KiB
Vue
<template>
|
|
<div class='scroll-container' ref='scrollContainer' @mousewheel="handleScroll">
|
|
<div class='scroll-wrapper' ref='scrollWrapper' :style="{top: top + 'px'}">
|
|
<slot></slot>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
const delta = 15
|
|
export default {
|
|
name: 'scrollBar',
|
|
data() {
|
|
return {
|
|
top: 0
|
|
}
|
|
},
|
|
methods: {
|
|
handleScroll(e) {
|
|
e.preventDefault()
|
|
const $container = this.$refs.scrollContainer
|
|
const $containerHeight = $container.offsetHeight
|
|
const $wrapper = this.$refs.scrollWrapper
|
|
const $wrapperHeight = $wrapper.offsetHeight
|
|
if (e.wheelDelta > 0) {
|
|
this.top = Math.min(0, this.top + e.wheelDelta)
|
|
} else {
|
|
if ($containerHeight - delta < $wrapperHeight) {
|
|
if (this.top < -($wrapperHeight - $containerHeight + delta)) {
|
|
this.top = this.top
|
|
} else {
|
|
this.top = Math.max(this.top + e.wheelDelta, $containerHeight - $wrapperHeight - delta)
|
|
}
|
|
} else {
|
|
this.top = 0
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style rel="stylesheet/scss" lang="scss" scoped>
|
|
@import '../../styles/variables.scss';
|
|
|
|
.scroll-container {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: $menuBg;
|
|
.scroll-wrapper {
|
|
position: absolute;
|
|
width: 100%!important;
|
|
}
|
|
}
|
|
</style>
|