fix[scrollPane&&scrollBar]:fixed scroll bug in Firefox

Author: PanJiaChen

src/components/ScrollBar/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="scroll-container" ref="scrollContainer" @mousewheel="handleScroll">
+  <div class="scroll-container" ref="scrollContainer" @wheel.prevent="handleScroll" >
     <div class="scroll-wrapper" ref="scrollWrapper" :style="{top: top + 'px'}">
       <slot></slot>
     </div>
@@ -8,6 +8,7 @@
 
 <script>
 const delta = 15
+
 export default {
   name: 'scrollBar',
   data() {
@@ -17,19 +18,19 @@ export default {
   },
   methods: {
     handleScroll(e) {
-      e.preventDefault()
+      const eventDelta = e.wheelDelta || -e.deltaY * 3
       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)
+      if (eventDelta > 0) {
+        this.top = Math.min(0, this.top + eventDelta)
       } 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)
+            this.top = Math.max(this.top + eventDelta, $containerHeight - $wrapperHeight - delta)
           }
         } else {
           this.top = 0

src/components/ScrollPane/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="scroll-container" ref="scrollContainer" @mousewheel="handleScroll">
+  <div class="scroll-container" ref="scrollContainer" @wheel.prevent="handleScroll">
     <div class="scroll-wrapper" ref="scrollWrapper" :style="{left: left + 'px'}">
       <slot></slot>
     </div>
@@ -18,20 +18,20 @@ export default {
   },
   methods: {
     handleScroll(e) {
-      e.preventDefault()
+      const eventDelta = e.wheelDelta || -e.deltaY * 3
       const $container = this.$refs.scrollContainer
       const $containerWidth = $container.offsetWidth
       const $wrapper = this.$refs.scrollWrapper
       const $wrapperWidth = $wrapper.offsetWidth
 
-      if (e.wheelDelta > 0) {
-        this.left = Math.min(0, this.left + e.wheelDelta)
+      if (eventDelta > 0) {
+        this.left = Math.min(0, this.left + eventDelta)
       } else {
         if ($containerWidth - padding < $wrapperWidth) {
           if (this.left < -($wrapperWidth - $containerWidth + padding)) {
             this.left = this.left
           } else {
-            this.left = Math.max(this.left + e.wheelDelta, $containerWidth - $wrapperWidth - padding)
+            this.left = Math.max(this.left + eventDelta, $containerWidth - $wrapperWidth - padding)
           }
         } else {
           this.left = 0
@@ -64,6 +64,7 @@ export default {
   white-space: nowrap;
   position: relative;
   overflow: hidden;
+  width: 100%;
   .scroll-wrapper {
     position: absolute;
   }