Question

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

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

我还创造了一个小提琴：

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

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

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

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

编辑：虽然我有一个似乎可以解决问题的答案，但实际上我正在寻找的是对溢出的元素的解决方案：隐藏适用于它们并且滚动是从溢出元素而不是正文滚动中获取的;类似的情况可以在这里找到：

http://www.fixedheadertable.com/

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

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

使用jquery滚动ie11问题与抖动元素

2 个答案: