视差效应 - Firefox 性能不佳 [英] Parallax effect - poor performance on Firefox
问题描述
我正在我的网站(html、css、js)上构建多层视差效果.一切都很好，但我注意到我的视差效果在 Firefox 上工作得非常糟糕，window.onscroll 似乎滞后，可以说刷新率非常低.
这是我的 JS 实现:
document.addEventListener('DOMContentLoaded', function() {const layer = document.querySelectorAll("[data-type='parallax']");window.addEventListener('scroll', event => {const topDistance = window.pageYOffset;window.requestAnimationFrame(function() {for (let i = 0; i 我的html代码:
你遇到过吗?这是典型的问题吗?我该如何解决?
我有以下非常简单的 JS 实现，后面有两层，由于抖动和滞后行为，Firefox 无法使用:
$(function() {$(window).on('scroll', function() {$('#background').css('background-position-y', $(window).scrollTop() * -.15);});});$(函数(){$(window).on('scroll', function() {$('#background2').css('background-position-y', $(window).scrollTop() * -.09);});});仅使用 CSS 的替代方案对我不起作用，因为它会导致背景层在我的内容结束后明显溢出.
我终于找到了一种提高桌面 Firefox 性能的方法(还没有在移动设备上).我加了
位置:固定；背景附件:固定；背景位置:顶部；到我所有的背景层.
iOS Safari 和移动版 Firefox 仍然没有改进.自 16 版以来，Firefox 有多个错误报告.
在我漫长的互联网搜索解决方案的过程中，我还发现并添加了 keithclark 的脚本，但我不确定这是否有任何区别，该脚本来自 2011 年:
/*Firefox 超级响应滚动 (c) Keith Clark - MIT 许可*/(功能(文档){console.log(文件执行")var root = doc.documentElement,滚动条宽度，滚动事件；//不理想，但比 UA 嗅探更好.如果(root.style 中的MozAppearance"){//确定垂直滚动条宽度scrollbarWidth = root.clientWidth;root.style.overflow = 滚动"；scrollbarWidth -= root.clientWidth;root.style.overflow = ";//创建一个合成滚动事件scrollEvent = doc.createEvent(UIEvent")scrollEvent.initEvent(scroll", true, true);//事件调度器函数滚动处理器(){doc.dispatchEvent(scrollEvent)}//检测文档滚动条轨道中的鼠标事件doc.addEventListener(鼠标按下"，功能(e){if (e.clientX > root.clientWidth - scrollbarWidth) {doc.addEventListener(mousemove", scrollHandler, false);doc.addEventListener(mouseup", function() {doc.removeEventListener(mouseup",arguments.callee,false);doc.removeEventListener(mousemove", scrollHandler, false);}， 错误的)}}， 错误的)//覆盖鼠标滚轮行为.doc.addEventListener(DOMMouseScroll", function(e) {//不要禁用热键行为如果 (!e.ctrlKey && !e.shiftKey) {root.scrollTop += e.detail * 16;scrollHandler.call(this, e);e.preventDefault()}}， 错误的)}})(文档);您可以通过将其粘贴到控制台进行测试.
我希望我至少能帮上一点忙.
I'm building multi layered parallax effect on my site (html, css, js). Everything works quite well, but I've noticed that my parallax effect works really bad on Firefox, window.onscroll seems to be laggy, refresh rate so to speak is very low.
Here's my JS implementation:
document.addEventListener('DOMContentLoaded', function() {
const layers = document.querySelectorAll("[data-type='parallax']");
window.addEventListener('scroll', event => {
const topDistance = window.pageYOffset;
window.requestAnimationFrame(function() {
for (let i = 0; i < layers.length; ++i) {
const depth = layers[i].getAttribute('data-depth');
const movement = topDistance * depth;
const translate3d = 'translate3d(0, ' + movement + 'px, 0)';
layers[i].style.transform = translate3d;
}
})
});
});
My html code:
<div class="parallax-banner">
<div class="parallax-layer layer-1" data-type="parallax" data-depth="0.05"></div>
<div class="parallax-layer layer-2" data-type="parallax" data-depth="0.2"></div>
<div class="parallax-layer layer-3" data-type="parallax" data-depth="0.4"></div>
<div class="parallax-layer layer-4" data-type="parallax" data-depth="0.6"></div>
<div class="parallax-layer layer-5" data-type="parallax" data-depth="0.7"></div>
<div class="parallax-layer layer-6" data-type="parallax" data-depth="0"></div>
</div>
Have you encountered it? Is it typical issue? How can I fix that?
I have the following very simple JS-implementation with two layers in the back, which was unusable with Firefox due to jittering and laggy behaviour:
$(function() {
$(window).on('scroll', function() {
$('#background').css('background-position-y', $(window).scrollTop() * -.15);
});
});
$(function() {
$(window).on('scroll', function() {
$('#background2').css('background-position-y', $(window).scrollTop() * -.09);
});
});
CSS-only alternatives didnt work for me as it caused the background layers to visibly overflow after my contents end.
Finally I found a way to improve the performance desktop Firefox (not on mobile yet). I added
position: fixed;
background-attachment: fixed;
background-position: top;
to all my background layers.
Still no improvement in iOS Safari and mobile Firefox. There are several bug reports for Firefox since version 16.
On my long way searching the internet for solutions i also found and added a script by keithclark but I'm not sure if this makes any difference at all, the script is from 2011:
/*
Firefox super responsive scroll (c) Keith Clark - MIT Licensed
*/
(function(doc) {
console.log("Document executed")
var root = doc.documentElement,
scrollbarWidth, scrollEvent;
// Not ideal, but better than UA sniffing.
if ("MozAppearance" in root.style) {
// determine the vertical scrollbar width
scrollbarWidth = root.clientWidth;
root.style.overflow = "scroll";
scrollbarWidth -= root.clientWidth;
root.style.overflow = "";
// create a synthetic scroll event
scrollEvent = doc.createEvent("UIEvent")
scrollEvent.initEvent("scroll", true, true);
// event dispatcher
function scrollHandler() {
doc.dispatchEvent(scrollEvent)
}
// detect mouse events in the document scrollbar track
doc.addEventListener("mousedown", function(e) {
if (e.clientX > root.clientWidth - scrollbarWidth) {
doc.addEventListener("mousemove", scrollHandler, false);
doc.addEventListener("mouseup", function() {
doc.removeEventListener("mouseup", arguments.callee, false);
doc.removeEventListener("mousemove", scrollHandler, false);
}, false)
}
}, false)
// override mouse wheel behaviour.
doc.addEventListener("DOMMouseScroll", function(e) {
// Don't disable hot key behaviours
if (!e.ctrlKey && !e.shiftKey) {
root.scrollTop += e.detail * 16;
scrollHandler.call(this, e);
e.preventDefault()
}
}, false)
}
})(document);
You can test it by pasting it to the console.
I hope I could at least help a little bit.
这篇关于视差效应 - Firefox 性能不佳的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
