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

admin管理员组

文章数量:1394772

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

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

• javascript
• jquery
• ios
• css
• microsoft-edge

Share Improve this question Follow edited Apr 29, 2021 at 18:52 CommunityBot 111 silver badge asked Nov 26, 2017 at 11:10 DarkChocoBarDarkChocoBar 7733 silver badges1212 bronze badges 1

• You need to show us what you have. Without the ability to console.log() and console.trace() it, we cannot help much. Please create a minimal reproducible example. – tao Commented Nov 26, 2017 at 12:00

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

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 mon 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;
}

With CSS this worked for me

I used

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

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

本文标签： How to disable quotswipe to go backquot in Microsoft Edge with javascript or jQueryStack Overflow