CODEWITHSUNDEEP
javascriptjqueryioscssmicrosoft-edge
DarkChocoBar
DarkChocoBar

Reputation: 77

How to disable "swipe to go back" in Microsoft Edge with javascript or jQuery?

I'm currently working on a website with Object horizontal rotation features. So let's say the first image you see is the front of an object, then the second image is the side and the third the back, the fourth the other side and the fifth the front view again.

In my case, I have in total 24 images of an object, which means there's a 15 degree angle difference between each picture. Right now I'm trying to make the rotation more smooth. It works perfectly on any browsers if I use my mouse. However, things start to go wrong if i use my touchscreen instead for browsers like Microsoft Edge.

The problem on Edge is that, if I try to swipe the object to the right, it somehow triggers the "go back to previous page" feature in Edge. It's something I could fix with simple javascript code when I'm using Chrome. The code looks like this:

        $(".reel-holder").bind('touchstart', function(event) {
                event.preventDefault();
                event.stopPropagation();
        });

Another problem when swiping on Edge is that, the rotation is rotated by picture. No matter how I swipe on the touch screen, it only goes to the next/previous picture.

How can I fix this problem with Javascript/JQuery?

iS THIS EGG

Upvotes: 0

Views: 5745

Answers (2)

Martijn B
Martijn B

Reputation: 4075

With CSS this worked for me

I used

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    overscroll-behavior: contain;    
}

https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior

Upvotes: 1

James T
James T

Reputation: 823

This can be achieved with the touch-action CSS property. For each element whose gestures you want to prevent Edge from handling, set touch-action to none. Alternatively, you could set touch-action to none on a common ancestor, or, if you want to prevent Edge from handling any gesture, set it on the body.

If you only want to prevent Edge from going back to the previous page, by swiping, but want Edge to handle other gestures, you could set touch-action to pan-right pan-y pinch-zoom.

Example:

.reel-holder {
    touch-action: none;
}

Upvotes: 7

Related Questions