How to Disable Smooth Scrolling in Ie11

How to disable smooth scrolling in IE11

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

using jquery scroll on ie11 issues with jittery elements

It seems like adding height: 100%; and overflow: auto; to the html, body elements removes the IE 11 issue:

JsFiddle Demo

[Edit]: Adding margin: 0; removes double scrollbars.

Conditionally cancel swipe-scrolling on IE11

Tried a lot of things and found a very simple solution that works decently.

If during the scroll event I decide the square is empty, I just reset the scrollTop / scrollLeft to the original (initial) position inside the event:

$("#screenArena").scroll(function(scrollEvent) {

if (CHECK_SQUARE_IS_EMPTY()) {
window.console.log ("Scrolling prevented");
if (SCROLLING_UP || SCROLLING_DOWN) this.scrollTop=ORIGINAL_SCROLL_TOP_POSITION;
if (SCROLLING_LEFT || SCROLLING_RIGHT) this.scrollLeft=ORIGINAL_SCROLL_LEFT_POSITION;
} else {
window.console.log ("Scrolling permitted");
}
});

Scrolling delay effect slower on IE 11

This is caused by different default behaviors when using position: fixed without setting any position (no left, top, right or bottom). The easiest way out in your case would be to use position: absolute instead.

IE11 - How to enable scrollbar in disabled fieldset

Maybe like this?

tbody{  display:block;  height: 50px;  overflow-y: scroll;}
<fieldset>  <table>    <tbody>      <tr> <td> <input type="text" disabled /> </td> </tr>      <tr> <td> <input type="text" disabled /> </td> </tr>      <tr> <td> <input type="text" disabled /> </td> </tr>      <tr> <td> <input type="text" disabled /> </td> </tr>      <tr> <td> <input type="text" disabled /> </td> </tr>    </tbody>  </table>  </fieldset>


Related Topics



Leave a reply



Submit