javascript - 视差效应 - Firefox 性能不佳
问题描述
我正在我的网站(html、css、js)上构建多层视差效果。一切都很好,但我注意到我的视差效果在 Firefox 上效果很差,window.onscroll
似乎有点滞后,可以说刷新率非常低。
这是我的 JS 实现:
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;
}
})
});
});
我的html代码:
<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>
你遇到过吗?是典型问题吗?我该如何解决?
解决方案
我有以下非常简单的 JS 实现,后面有两层,由于抖动和滞后行为,Firefox 无法使用:
$(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 的替代方案对我不起作用,因为它导致背景层在我的内容结束后明显溢出。
最后,我找到了一种提高桌面 Firefox 性能的方法(还没有在移动设备上)。我添加了
position: fixed;
background-attachment: fixed;
background-position: top;
到我所有的背景层。
iOS Safari 和移动 Firefox 仍然没有改进。自版本 16 以来,Firefox 有几个错误报告。
在我在互联网上寻找解决方案的漫长过程中,我还发现并添加了 keithclark 的脚本,但我不确定这是否有任何区别,该脚本来自 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);
您可以通过将其粘贴到控制台来测试它。
我希望我至少能帮上一点忙。
推荐阅读
- reactjs - 如何在 React.js 项目中获得交易效果?
- react-native - `useState` 错误地链接了单个 Redux + React Native 组件的多个实例
- mysql - 有没有比这更有效的 JOIN 来获得正确的输出?
- c++ - 尝试使用重载运算符编写程序时出错
- flutter - 如何创建波浪小部件?
- python - 如何在 tkinter 中使用 Canvas 在不同的帧上获取两个图像?
- sql - 如何在 Teradata SQL 中生成自动数字以严格递增 1
- google-sheets - 如何在 Google 表格中创建带有 x 轴对数刻度的直方图
- vb.net - 如何将拆分整数放入二维数组中?
- amazon-web-services - 如何从 Saml2aws cli 会话中注销或强制登录