using jquery scroll on ie11 issues with jittery elements

问题

I just encountered a strange issue on ie11. I am trying to create a fixed element that will scroll along with window scroll.

$(window).scroll(function() {
    var scrollY=$(this).scrollTop();
    $('.myelem').css('transform', 'translateY(' + scrollY + 'px)');
});

I have also created a fiddle of this:

https://jsfiddle.net/fyngwnz6/1/

(This is for replicating the issue, I know this particular case could be solved with a fixed element)

The code works flawlessly with no performance issues on every browser, except ie11. When using the scrollbar 'myelem' element scrolls with just a small jitter which becomes more obvious when using the mouse wheel. However, where you can really see the issue is when using the scrollbar buttons. It seems like the render of the scrolling has to finish in order for js to track the scroll.

I saw that there were issues with ie11 and smooth scrolling, but this is not the case here. Is there any kind of solution to this? Am I missing something?

edit: although I have an answer that seems to solve the issue, actually what I am looking for is a solution to elements that have overflow:hidden applies on them and the scroll is taken from an overflown element rather than body scroll; a similar scenario can be found here:

http://www.fixedheadertable.com/

If 'fixed column' is enabled in the example, then clicking on the scrollbars shows the jerkiness in the movement.

回答1:

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.

回答2:

for edge use:

/*Edge - works to 41.16299.402.0*/
@supports (-ms-ime-align:auto) 
{
    html{
        overflow: hidden;
        height: 100%;       
    }
    body{
        overflow: auto;
        height: 100%;
        position: relative;
    }
}

/*Ie 10/11*/
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) 
{
    html{
        overflow: hidden;
        height: 100%;    
    }
    body{
        overflow: auto;
        height: 100%;
        position: relative
    }
}

来源：https://stackoverflow.com/questions/29648924/using-jquery-scroll-on-ie11-issues-with-jittery-elements