javascript - 机车卷轴闪烁

Question

使用 Locomotive scroll 向上滚动时会导致一些闪烁。上半部分中的元素出现在视口(viewport)中时会有小但明显的滞后(可能是 0.1 秒)。我看了很多演示，但几乎所有这些网站都有同样的问题。例如，official demo : 查看“04. 固定元素”部分 - 向上滚动时图像闪烁。

使用Locomotion平滑滚动时是否不可避免？

附言Windows 上的 Chrome 97.0

更新 1由于实现了虚拟滚动条，该问题仅出现在基于 Chrome 的浏览器(自 94 版本以来)。

已找到临时解决方案:

.has-scroll-smooth 
{position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;}

但是如果您对页面上的某些元素使用固定位置，这会破坏布局。

Answer 1

直到现在我都面临着同样的问题，但我已经开始使用 matrix3D 坐标并最终修复了它。

只需从 locomotive-sroll.min.js 中找到您的 matrix3D 坐标并将其替换为以下值。

稍后谢谢我。

key: "transform",
value: function(t, e, i, s) {
    var n;
    if (s) {
        var o = q(t),
            r = F(o.x, e, s),
            l = F(o.y, i, s);
           n = "matrix3d(1,0,1,0,0,1,0,0,0,0,1,0,".concat(r, ",").concat(l, ",0,1)");
    } else n = "matrix3d(1,0,1,0,0,1,0,0,0,0,1,0,".concat(e, ",").concat(i, ",0,1)");
    console.log(n);
    t.style.webkitTransform = n, t.style.msTransform = n, t.style.transform = n
}