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

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

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

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

我还创建了一个 fiddle :

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

(这是为了复制问题,我知道这个特殊情况可以用固定元素来解决)

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

我看到 ie11 和平滑滚动存在问题,但这里的情况并非如此。有什么办法解决这个问题吗?我错过了什么吗?

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

http://www.fixedheadertable.com/

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

最佳答案

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

JsFiddle Demo

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

关于javascript - 在 ie11 上使用 jquery 滚动会出现抖动元素问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29648924/

相关文章:

javascript - 由 javascript 更改时回发时丢失的值

javascript - 使用 Vueify 渲染函数时在模板中绑定(bind) Vue 数据属性值

javascript - 如何使用jquery在表单提交之前显示通知?

javascript - JS 格式每 2 位十六进制字符串

vba - 无法在我的抓取工具中设置超时选项以防止无限循环

javascript - “SCRIPT7002: XMLHttpRequest: Network Error 0x80070005, Access is denied.” 在 IE11 中使用 fetch API

javascript - HTML - 将字符串转换为多行

javascript - Django 管道和 javascript 依赖项

JQuery:计算滚动误差百分比

javascript - swfObject 嵌入对象在 ie11 中不起作用