Question

67

Prevent vertical scroll on swipe -vanilla JS

rated 0 times [ 68] [ 1] / answers: 1 / hits: 9040 / 6 Years ago, thu, february 22, 2018, 12:00:00

I wrote this code to add swipe function for an image slider. The slider is working correctly.

However when i perform a right or left swipe there is some vertical scrolling which is distracting and annoying.

I'm storing the reference to touchstart in the touch object.

And on touchend event, if vertical distance (lenY) is more than 50, i trigger preventDefault on the touchstart.

This isn't working.

Simplest option is to call preventDefault directly on touchStart. But the image slider occupies a large part of the mobile screen making scrolling down the page tricky.

I need to pass the lenY (vertical distance) to the touch start handler to prevent default action.

function triggerTouch() {

    use strict;

    var tZone = document.getElementById('sl-m'),

        touch = {},

        startX = 0,

        startY = 0,

        endX = 0,

        endY = 0;



    if (tZone) {

        tZone.addEventListener('touchstart', function (e) {

            startX = e.changedTouches[0].screenX;

            startY = e.changedTouches[0].screenY;



            // store reference to touch event

            touch.start = e;

        }, false);



        tZone.addEventListener('touchend', function (e) {

           endX = e.changedTouches[0].screenX;

           endY = e.changedTouches[0].screenY;



           var lenX = Math.abs(endX - startX);

           var lenY = Math.abs(endY - startY);



           // check if user intended to scroll down

           if (lenY < 50 && lenX > 50) {

                touch.start.preventDefault();

                e.preventDefault();

                swipe(tZone, startX, endX);

           }

        }, false);

    }

}

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

aileent

Add To Favorites

Follow

Total Points: 556

Total Questions: 107

Total Answers: 101

Location: Croatia

Member since Fri, Sep 11, 2020

4 Years ago

answered 6 Years ago angelicajayleneh · Accepted Answer

Since i haven't got an answer i am posting my own answer, hoping someone can provide the correct implementation.

I ended up using the css overflow property to temporarily disable vertical scroll.

This works perfectly though there is a small side effect. Once you swipe through the image slider, the scroll is disabled.

A swipe upwards is required to restore scroll to the page. Its not noticeable but i still want to figure the right way.

var touch = {};



window.onload = function () {

    use strict;

    document.body.addEventListener(touchstart, touchHandler);

    document.body.addEventListener(touchend, touchHandler);

};



function touchHandler(e) {

    use strict;



    var el = e.target;



    if (el.parentNode.id === sl-m) {

        if (e.type === touchstart) {

            touch.startX = e.changedTouches[0].screenX;

            touch.startY = e.changedTouches[0].screenY;

        } else {

            touch.endX = e.changedTouches[0].screenX;

            touch.endY = e.changedTouches[0].screenY;



            touch.lenX = Math.abs(touch.endX - touch.startX);

            touch.lenY = Math.abs(touch.endY - touch.startY);



            if (touch.lenY < 20) {

                // disable scroll

                document.body.style.overflowY = hidden;



                // do swipe related stuff

                swipe(el.parentNode);

            } else {

                // enable scroll if swipe was not intended

                document.body.style.overflowY = scroll;

            }

        }

    } else {

        // keep scroll enabled if touch is outside the image slider 

        document.body.style.overflowY = scroll;

    }

}