|
@@ -1,5 +1,5 @@
|
1
|
1
|
<template>
|
2
|
|
- <div class="scroll-container" ref="scrollContainer" @mousewheel="handleScroll">
|
|
2
|
+ <div class="scroll-container" ref="scrollContainer" @wheel.prevent="handleScroll" >
|
3
|
3
|
<div class="scroll-wrapper" ref="scrollWrapper" :style="{top: top + 'px'}">
|
4
|
4
|
<slot></slot>
|
5
|
5
|
</div>
|
|
@@ -8,6 +8,7 @@
|
8
|
8
|
|
9
|
9
|
<script>
|
10
|
10
|
const delta = 15
|
|
11
|
+
|
11
|
12
|
export default {
|
12
|
13
|
name: 'scrollBar',
|
13
|
14
|
data() {
|
|
@@ -17,19 +18,19 @@ export default {
|
17
|
18
|
},
|
18
|
19
|
methods: {
|
19
|
20
|
handleScroll(e) {
|
20
|
|
- e.preventDefault()
|
|
21
|
+ const eventDelta = e.wheelDelta || -e.deltaY * 3
|
21
|
22
|
const $container = this.$refs.scrollContainer
|
22
|
23
|
const $containerHeight = $container.offsetHeight
|
23
|
24
|
const $wrapper = this.$refs.scrollWrapper
|
24
|
25
|
const $wrapperHeight = $wrapper.offsetHeight
|
25
|
|
- if (e.wheelDelta > 0) {
|
26
|
|
- this.top = Math.min(0, this.top + e.wheelDelta)
|
|
26
|
+ if (eventDelta > 0) {
|
|
27
|
+ this.top = Math.min(0, this.top + eventDelta)
|
27
|
28
|
} else {
|
28
|
29
|
if ($containerHeight - delta < $wrapperHeight) {
|
29
|
30
|
if (this.top < -($wrapperHeight - $containerHeight + delta)) {
|
30
|
31
|
this.top = this.top
|
31
|
32
|
} else {
|
32
|
|
- this.top = Math.max(this.top + e.wheelDelta, $containerHeight - $wrapperHeight - delta)
|
|
33
|
+ this.top = Math.max(this.top + eventDelta, $containerHeight - $wrapperHeight - delta)
|
33
|
34
|
}
|
34
|
35
|
} else {
|
35
|
36
|
this.top = 0
|