Swiper: Release on Edges Scroll is not smooth

[pedrofmiguel]

StackOverflow Question: https://stackoverflow.com/questions/60526022/release-on-edges-scroll-is-not-smooth

This is a (multiple allowed):

• [x] bug
• [ ] enhancement
• [ ] feature-discussion (RFC)

• Swiper Version: 4.5.1 & 5.3.1
• Platform/Target and Browser Versions: PLATFORM CLIENT YOU ARE TARGETING SUCH AS macOS, Windows, CORDOVA, IOS, ANDROID, CHROME, ETC.
• Live Link or JSFiddle/Codepen or website with isssue: PREFERABLY _(IF YOU WANT YOUR ISSUE TO BE RESOLVED ASAP)_.

Expected Behavior

-> When building the slider , i want to release the mouse scroll as soon it reaches the first or last slide, with smooth scroll.

Actual Behavior

-> Sometimes it makes the page scroll and the slider at the same time (happened only a few times) when i lowered the swiper version to 4.5.1 -> Main problem happened when i was working with version 5.3.1, when reaching the first or last slide, it scrolled too suddently, and the transition wasn't smooth which caused some usability problems...
P.S. Remember, an issue is not the place to ask questions. You can use Stack Overflow
for that.

Code:

Version 4.5.1

let productSwiper = new Swiper(".swiper-container--product", {
                direction: "vertical",
                loop: false,
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true,
                },
                grabCursor: true,
                speed: 1000,
                paginationClickable: true,
                parallax: true,
                autoplay: false,
                effect: "slide",
                centerMode: false,
                mousewheel: true,
                loopFillGroupWithBlank: false,
                slidesPerView: 'auto',
                touchReleaseOnEdges:true
            });
            productSwiper.swiper;

Version 5.3.1

let productSwiper = new Swiper(".swiper-container--product", {
                        direction: "vertical",
                        loop: true,
                        pagination: {
                            el: '.swiper-pagination',
                            clickable: true,
                        },
                        grabCursor: true,
                        speed: 1000,
                        parallax: true,
                        autoplay: false,
                        effect: "slide",
                        centerMode: false,
                        mousewheelSensitivity: 1,
                        mousewheel: {
                            releaseOnEdges: true,
                        },
                        loopFillGroupWithBlank: false,
                        slidesPerView: 'auto',
                 });
               productSwiper.swiper;

[tiberiumihai]

You can fix it by adding to your init params:

let productSwiper = new Swiper(".swiper-container--product", {
    ...
    on: {
        slideChange: function() {
            setTimeout(function () {
                swiper.params.mousewheel.releaseOnEdges = false;
            }, 500);
        },
        reachEnd: function() {
            setTimeout(function () {
                swiper.params.mousewheel.releaseOnEdges = true;
            }, 750);
        }
    }
    ...
};

That's exactly how I solve this issue.

[pedrofmiguel]

Thanks!! :tada: