CODEWITHSUNDEEP
javascriptcssinternet-explorer
Tzach
Tzach

Reputation: 13386

How to disable smooth scrolling in IE11

IE's smooth scrolling is causing my app behave strange (scroll events are fired with a small delay).

Is there a way to completely disable smooth scrolling in IE11 using CSS or Javascript?

Upvotes: 5

Views: 11738

Answers (2)

BigPino
BigPino

Reputation: 113

This code will handle every scroll type (mouse and keyboard (PageUP, PageDOWN, Up, Down)):

if(navigator.userAgent.match(/Trident\/7\./)) { // if IE
    $('body').on("mousewheel", function () {
        // remove default behavior
        event.preventDefault(); 

        //scroll without smoothing
        var wheelDelta = event.wheelDelta;
        var currentScrollPosition = window.pageYOffset;
        window.scrollTo(0, currentScrollPosition - wheelDelta);
    });
    $('body').keydown(function (e) {
        var currentScrollPosition = window.pageYOffset;

        switch (e.which) {
            case 33: // page up
                e.preventDefault(); // prevent the default action (scroll / move caret)
                window.scrollTo(0, currentScrollPosition - 600);
                break;
            case 34: // page down
                e.preventDefault(); // prevent the default action (scroll / move caret)
                window.scrollTo(0, currentScrollPosition + 600);
                break;
            case 38: // up
                e.preventDefault(); // prevent the default action (scroll / move caret)
                window.scrollTo(0, currentScrollPosition - 120);
                break;
            case 40: // down
                e.preventDefault(); // prevent the default action (scroll / move caret)
                window.scrollTo(0, currentScrollPosition + 120);
                break;
            default: return; // exit this handler for other keys
        } 
    });

}

Upvotes: 1

M H
M H

Reputation: 2183

IE's smooth scrolling feature is turned on for all windows 8 users of IE11.

You can disable it by going to Internet options, Advanced, and uncheck use smooth scrolling. And it resolves the problem. But all users of your site will not do that. So I highly recommend you not disabling it. Try to develop on the same machines/browsers that your users will use. Otherwise you will have inconsistencies with your users of your site. I also recommend to NEVER change the default browser settings, for the same reason.

Here is a JS fix.

Fiddle

if(navigator.userAgent.match(/Trident\/7\./)) {
    $('body').on("mousewheel", function (event) {
        event.preventDefault();
        var wd = event.wheelDelta;
        var csp = window.pageYOffset;
        window.scrollTo(0, csp - wd);
    });
}

Upvotes: 13

Related Questions