在 ie11 上使用 jquery 滚动会出现抖动元素问题

Question

我刚刚在ie11上遇到了一个奇怪的问题。我正在尝试创建一个固定元素，它将与 window 滚动一起滚动。

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

我还创建了一个 fiddle 这个：

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

（这是为了复制问题，我知道这个特殊情况可以用固定元素解决）

该代码在除 ie11 之外的所有浏览器上都可以完美运行，没有任何性能问题。当使用滚动条 'myelem' 时，元素滚动时会有轻微的抖动，这在使用鼠标滚轮时会变得更加明显。但是，您真正可以看到问题的地方是使用滚动条按钮时。似乎滚动渲染必须完成才能让 js 跟踪滚动。

我看到 ie11 和平滑滚动有问题，但这里不是这样。有什么解决办法吗？我错过了什么吗？

编辑：虽然我有一个似乎可以解决问题的答案，但实际上我正在寻找的是对应用了 overflow:hidden 的元素的解决方案，并且滚动是从溢出的元素中获取的比 body 滚动；可以在此处找到类似的场景：

http://www.fixedheadertable.com/

如果示例中启用了 'fixed column'，则单击滚动条会显示运动中的抖动。

Answer 1

似乎将 height: 100%; 和 overflow: auto; 添加到 html, body 元素可以消除 IE 11 问题：

JsFiddle Demo

[编辑]：添加margin: 0;删除双滚动条。

Answer 2

边缘使用：

/*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
    }
}

在 ie11 上使用 jquery 滚动会出现抖动元素问题

using jquery scroll on ie11 issues with jittery elements

javascript

jquery

internet-explorer-11

smooth-scrolling