implemented mouse wheel scrolling

components/GalleryThumbs.vue

@@ -37,7 +37,7 @@
                 direction="left"
                 @navClick="handleNavClickDesktop(activeRow, 'left')"/>
       <ThumbNav class="thumb-nav thumb-nav--right mobile-hide"
-                :class="{ 'is-active': thumbRowOffsets[activeRow] > 0 }"
+                :class="{ 'is-active': isRightDesktopNavActive }"
                 direction="right"
                 @navClick="handleNavClickDesktop(activeRow, 'right')"/>
     </ul>
@@ -71,7 +71,8 @@ export default {
     return {
       thumbRowOffsets: new Array(this.galleries.length),
       isLeftDesktopNavActive: false,
-      resizeIsThrottling: false
+      resizeIsThrottling: false,
+      isThumbsScrolling: false
     }
   },
 
@@ -79,6 +80,9 @@ export default {
     thumbsVerticalOffset () {
       let rowHeight = this.$refs.thumbContainer ? this.$refs.thumbContainer[0].clientHeight : 0;
       return  rowHeight * this.activeRow
+    },
+    isRightDesktopNavActive () {
+      return this.thumbRowOffsets[this.activeRow] > 0
     }
   },
 
@@ -95,6 +99,9 @@ export default {
       this.updateElements()
     })
     window.addEventListener('resize', this.handleResize)
+    this.$refs.galleryThumbsList.addEventListener('wheel', this.handleThumbsScroll)
+    // firefox
+    this.$refs.galleryThumbsList.addEventListener('mousewheel', this.handleThumbsScroll)
   },
 
   methods: {
@@ -166,7 +173,32 @@ export default {
           this.resizeIsThrottling = false
         })
       }
+    },
+    handleThumbsScroll(event) {
+      if (event.wheelDeltaX) {
+        if (event.wheelDeltaX > 0) {
+          this.soThumbScroll('right')
+        } else if (event.wheelDeltaX < 0) {
+          this.doThumbScroll('left')
+        }
+      } else if (event.deltaY) {
+        if (event.deltaY > 0) {
+          this.doThumbScroll('left')
+        } else if (event.deltaY < 0) {
+          this.doThumbScroll('right')
+        }
+      }
+    },
+    doThumbScroll(direction) {
+      if (this.isThumbsScrolling) { return }
       
+      this.isThumbsScrolling = true
+      if ((direction === 'left' && this.isLeftDesktopNavActive) || (direction === 'right' && this.isRightDesktopNavActive)) {
+        this.handleNavClickDesktop(this.activeRow, direction)
+      }
+      this.$nextTick(() => {
+        this.isThumbsScrolling = false
+      })
     }
   }
 }