看完后我真的很兴奋this article关于更快的滚动效果。我开始实现 Warry 的方法,看看我是否可以发现性能上的任何差异 - 与使用滚动事件监听器相比:
window.addEventListener('scroll', function() {
console.log('Scrolling: ' + window.pageYOffset);
});
文章代码:
function loop() {
if (lastPosition == window.pageYOffset) {
requestAnimationFrame(loop);
return false;
} else lastPosition = window.pageYOffset;
console.log('Scrolling: ' + window.pageYOffset);
// make sticky calculations...
requestAnimationFrame(loop);
}
loop(); // start loop
这两段代码输出相同的 (Y) 偏移量,并且在性能方面似乎是等效的。所以我的问题是:这篇文章是否正确?
另外,requestAnimationFrame
是如何适应这张图片的?我知道它告诉浏览器它希望执行重绘。或者......位置固定只是要走的路吗?我对这个主题很感兴趣,因为我正在开发一个用于粘性元素的插件。
如有任何信息或建议,我们将不胜感激!
最佳答案
由于滚动事件可以高速触发,因此事件处理程序不应执行计算量大的操作,例如 DOM 修改。相反,建议使用 requestAnimationFrame、setTimeout 或 customEvent 来限制事件。
It’s important to not only use requestAnimationFrame for your animations, but also to use it in the right way. - html5rocks
另见 https://developer.mozilla.org/en-US/docs/Web/Events/scroll
这是一段不错的代码,可以获取正确的浏览器前缀。如果不支持 requestAnimationFrame
,我们回退到 setTimeout(function(){}, 0)
。
var requestAnimationFrame = window.requestAnimationFrame
|| window.webkitRequestAnimationFrame
|| window.mozRequestAnimationFrame
|| window.msRequestAnimationFrame
|| window.oRequestAnimationFrame
|| function(callback){ setTimeout(callback, 0) };
// Usage
window.addEventListener('scroll', function() {
requestAnimationFrame(this.scroll); // call scroll event handler
});
关于javascript - 没有 onScroll 的滚动速度更快?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40245077/