CODEWITHSUNDEEP
cssinternet-explorermicrosoft-metro
jsgoupil
jsgoupil

Reputation: 3997

Disable Navigation Swipe in Metro IE

I am trying to disable the navigation swiping. I don't want the webpage to go back or forward when the user swipes left or right.

I noticed we can set the touch-action to none on the html element preventing the behavior. However, when scrolling a child element that has some overflow, it will "chain" the scroll then will allow the back navigation.

So I thought of adding -ms-scroll-chaining: none on the html element, but it works only if the element scrolls. So adding overflow: scroll on html actually does the trick. But now I have scrollbars showing on my other browsers.

What is the right way to do this?

    html {
        -ms-touch-action: none; /* Doesn't work if scrolling from child element */
        -ms-scroll-chaining: none; /* Works only with the next line */
        overflow: scroll; /* With this line all the other browsers have a scrollbar */
    }

Upvotes: 3

Views: 2679

Answers (2)

Michael Svinth
Michael Svinth

Reputation: 56

I used this:

@media screen and (-ms-high-contrast: none) {
    // Windows 8+ IE only
    html {
        overflow-x: scroll;
        -ms-touch-action: none; 
        -ms-overflow-style: none;
        -ms-scroll-chaining: none; 
    }
}

Upvotes: 4

Jinx
Jinx

Reputation: 358

Have you tried 

body, html {
   -ms-touch-action:none;
}

and for every class which can be scrolled (Y - axis) apply

-ms-scroll-chaining: none;

In my project we have special class for scrolling what is comfortable:

.scroll-y {
    overflow-y: auto;
    overflow-x: hidden;
    -ms-scroll-chaining: none;
}

Worked for me

Upvotes: 0

Related Questions