Home Forums Basel support forum Prevent scroll on image carousel swipe

Prevent scroll on image carousel swipe

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #33731

    floristb
    Participant

    Dear support,

    Currently when you swipe on mobile on the product pages between images the page still scrolls which gives a bad user experience. Is there a way to prevent scrolling when swiping?

    For example see:
    https://www.etq-amsterdam.com/shop/low-5-army-sandshell/

    #33736

    floristb
    Participant

    Already fixed it with the following code:

    var xPos = null;
    var yPos = null;
    window.addEventListener( “touchmove”, function ( event ) {
    var touch = event.originalEvent.touches[ 0 ];
    oldX = xPos;
    oldY = yPos;
    xPos = touch.pageX;
    yPos = touch.pageY;
    if ( oldX == null && oldY == null ) {
    return false;
    }
    else {
    if ( Math.abs( oldX-xPos ) > Math.abs( oldY-yPos ) ) {
    event.preventDefault();
    return false;
    }
    }
    } );

    This would be a nice addition to your theme as it improves the mobile experience in a great way!

    #33762

    Artem Temos
    Keymaster

    Hi,

    Could you please specify where exactly did you add this code?

    Thank you

    #34439

    floristb
    Participant

    Hi,

    I have added it within the Custom JS on document ready section. Major improvement on the user experience on all touch devices. My advice is to add this within the default code of the template to let all customers benefit.

    Kind regards,
    Floris

    #34456

    Artem Temos
    Keymaster

    OK, thank you for the suggestion!

Viewing 5 posts - 1 through 5 (of 5 total)

The topic ‘Prevent scroll on image carousel swipe’ is closed to new replies.