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

• 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

2 Answers 2

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