IE10 + 11：onscroll＆transform laggy性能

我有一个简单的代码片段，用JS和CSS转换创建一个“固定头文件”。在现代浏览器上性能很好，但它跳到IE 10上& 11.IE10 + 11：onscroll＆transform laggy性能

我不确定IE浏览器的滚动事件是缓慢还是样式改变。

有没有解决方法来提升性能？

还是我需要去一个不同的路径？（position:fixed） - 我真的很讨厌沿着固定路径走下去，因为translateY解决方案对表头也很好用。

var el = document.getElementById('test'); 

window.onscroll = function() { 
    var wintop = window.pageYOffset; 
    var offset = el.offsetTop; 
    el.style.transform = 'translateY(' + (window.pageYOffset - el.offsetTop) + 'px)'; 
};

试试看是here。

来源

2016-07-25 Facius

scroll事件被触发太多次，这可能是您在IE中遇到的性能滞后的原因。

我建议使用debounce，throttle或使用超时实现您自己的解决方案，以控制您允许函数随时间执行的次数。

阅读the article了解更多详情。

来源

2016-07-25 09:33:54

谢谢你的建议，节流或反弹似乎在这种情况下没有任何区别。我已经用油门和去抖功能更新了codepen – Facius

@Facius事实证明，你必须使用'position：fixed'。顺便说一下，它不需要任何JS和更多的性能。 –

谢谢，我知道这是一个“简单的粘头”的可能解决方案。但是如果你需要在动态表格上有一个粘性头部（列的宽度被拧紧），它就不能很好地工作。我提供的例子是一个非常简化的版本，真正的解决方案更大更灵活。 – Facius

IE10 + 11：onscroll＆transform laggy性能

回答

相关问题