Windows 10, Chrome 81 + IE etc., mousewheel is not working

[ljanecek]

On the Windows 10, Chrome 81, mousewheel scroll is not working. It's not possible to scroll to third and other slides.

[surmon-china]

[ljanecek]

The same problem is here: https://github.com/nolimits4web/swiper/issues/3581#event-3341700917

And fix is also done.

[isuke01]

Also the scroll is not working in Mac OS Chrome, Safari, FF etc ... ;) swiperOptions: { observer: true, mousewheelControl: true, slidesPerView: 1, freeMode: false, freeModeSticky: true, direction: 'vertical' } Edit: Fix as @ljanecek Posted is a bit of fix, but need more work, because it simply scroll too many times/too fast if user keep scrolling. Fix:

data: function() {
   const VM = this
      return {
       //If can scroll to next element
        allowNext: true,
        swiperOptions: {
          observer: true,
          mousewheelControl: true,
          slidesPerView: 1,
          freeMode: false,
          freeModeSticky: true,
          direction: 'vertical',
          hashNavigation: {
            watchState: true,
            replaceState: true,
          },
          on: {
            transitionStart() {
             // Update if start 
              VM.allowNext = false
            },
            transitionEnd() {
             // Update when end
              VM.allowNext = true
            },
          },
        }
      }
},
 computed: {
      swiper() {
        return this.$refs.mySwiper.$swiper
      }
 },
 mounted() {
    //Bind scroll and content
      this.content = document.querySelector('body');
      this.content.addEventListener("wheel" , this.watchScrollWheel )
},
destroyed() {
     //Remove when destroyed, to prevent memory leaks
      this.content.removeEventListener("wheel" , this.watchScrollWheel )
 },
 methods: {
      watchScrollWheel(e){
       //Check if we can scroll to new slide
        if(this.allowNext){
          e.deltaY < 0 ? this.swiper.slideNext() : this.swiper.slidePrev();
        }
      }
 },

[rythm-of-the-red-man]

@isuke01 Your solution works good enough for most cases, but it "trims" freeMode feature. To use default solution (by which I mean defining wheel in swiper options) you guys need to register swiper class in "custom" way described in Readme.md by @surmon-china .

Small example:

import Vue from 'vue';
import { Swiper as SwiperClass, Mousewheel } from 'swiper/core';
import getAwesomeSwiper from 'vue-awesome-swiper/dist/exporter';
SwiperClass.use([Mousewheel]);
Vue.use(getAwesomeSwiper(SwiperClass));

If you register component this way, scroll works when options provided:

{
   mousewheel:true,
   freeMode:true
}

[MrToxy]

@isuke01 Your solution works good enough for most cases, but it "trims" freeMode feature. To use default solution (by which I mean defining wheel in swiper options) you guys need to register swiper class in "custom" way described in Readme.md by @surmon-china .

Small example:

import Vue from 'vue';
import { Swiper as SwiperClass, Mousewheel } from 'swiper/core';
import getAwesomeSwiper from 'vue-awesome-swiper/dist/exporter';
SwiperClass.use([Mousewheel]);
Vue.use(getAwesomeSwiper(SwiperClass));

If you register component this way, scroll works when options provided:

{
   mousewheel:true,
   freeMode:true
}

This is far easier solution, thank you