在 ie11 上使用 jquery 滚动时出现抖动元素的问题答案

【问题标题】：using jquery scroll on ie11 issues with jittery elements在 ie11 上使用 jquery 滚动时出现抖动元素的问题
【发布时间】：2015-04-15 11:23:55
【问题描述】：

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

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

我还创建了一个这样的小提琴：

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

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

代码可以完美运行，在每个浏览器上都没有性能问题，除了 ie11。当使用滚动条时，'myelem' 元素滚动时只有一点点抖动，这在使用鼠标滚轮时变得更加明显。但是，您真正可以看到问题的地方是使用滚动条按钮时。看起来滚动的渲染必须完成才能让 js 跟踪滚动。

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

编辑：虽然我有一个似乎可以解决问题的答案，但实际上我正在寻找的是对具有溢出的元素的解决方案：hidden 适用于它们并且滚动取自溢出元素而不是正文滚动；可以在这里找到类似的场景：

http://www.fixedheadertable.com/

如果在示例中启用了“固定列”，则单击滚动条会显示移动的抖动。

【问题讨论】：

标签： javascript jquery internet-explorer-11 smooth-scrolling

【解决方案1】：

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

JsFiddle Demo

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

【讨论】：

添加 margin:0 和 padding:0 禁用了 jsfiddle 额外的滚动条，似乎解决了这个问题，但不是我的特定代码。让我花点时间来回复你
当不讨论滚动体上的正文而是讨论元素滚动时，我将如何复制类似的代码？这看起来像一个非常具体的黑客..？我的意思是有什么解释为什么会这样吗？
很好，成功了。如果我对您的理解正确，请复制此内容以让每个人说 div 作为容器工作，该容器包含一个在滚动时应该跟随的子元素？我想说，同样的规则仍然存在，但我认为height 属性是这里的关键。而且很难说如何将其复制到具有许多元素和不同 css 属性的页面..
我更新了原始描述并进行了修改，如果您有空请查看此

【解决方案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
    }
}

【讨论】：