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
How to Slow Down Scrolling Speed with JavaScript
How to Open Safari from a Webapp in iOS 7
Calculate Absolute Dimensions of a Div Rotated in Perspective with CSS3
How to Query Whole Dom for Elements Matching Some Computed Style ? (In Pure Js)
Detecting Screen Resolution to Load Alternative CSS a Good Idea
Selecting Text in a Div Programmatically Using Position Values Belong to That Text
Checking for Scrollheight of an Element Sometimes Returning 0
How to Get the Exact Rgba Value Set Through CSS via JavaScript
Inset-Shadow on HTML5 Canvas Image
Making Links Active in JavaScript
Changing Leaflet Markercluster Icon Color, Inheriting the Rest of the Default CSS Properties
Applying More in Depth Selection to the :Host CSS Pseudo Class
Add CSS3 Support to IE7+ with JavaScript
React Onclick Add Class to Clicked Element But Remove from the Others
Modify Pseudo Select :After in JavaScript
JavaScript Keypress Event Not Raised on Android Browser
Capture "Done" Button Click in Iphone's Virtual Keyboard with JavaScript