5

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?

Tzach
  • 12,889
  • 11
  • 68
  • 115
  • Possible duplicate: http://stackoverflow.com/questions/21775234/ie-11-smooth-scrolling-not-firing-intermediate-scroll-events – Josh Burgess Apr 02 '15 at 15:17

2 Answers2

13

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);
    });
}
jhadenfeldt
  • 194
  • 2
  • 13
M H
  • 2,179
  • 25
  • 50
  • Did this not fix your issue? Please let me know. – M H Jun 03 '15 at 16:09
  • Thank you for your solution. It's simply INGENIOUS and it fixed the problem with my website. – iSofia Jul 22 '15 at 18:57
  • 1
    Glad you were able to use it. Don't forget to thumbs up. – M H Jul 23 '15 at 12:35
  • 1
    Still working great, although I found another related quirk. If the mouse wheel is scrolled when the mouse cursor is on the scroll bar itself _(not the html body)_, the stutter still occurs. Same issue when scrolling by _clicking on the up/down arrows_ of the scroll bar, but not when dragging the scroll bar _slider/thumb element_. Could this probably be fixed in a similar manner? Thank you. – iSofia Jul 23 '15 at 17:31
  • I am sure it can be, you can try, or maybe ask a question with detailed example. IE is very quirky. – M H Jul 23 '15 at 18:59
  • This answer results in a weird problem. I have a page with a dialog. When doing mouse wheel, the dialog isn't scrolled up or down. – emeraldhieu Nov 26 '15 at 06:15
  • I'm not sure how anyone is getting this to work... there is no `event` for the `event.preventDefault()`. In other words, the `event` argument needs to be passed into the function. `.on("mousewheel", function (event)...` – Sparky Sep 26 '16 at 04:27
1

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

}
BigPino
  • 113
  • 1
  • 10