javascript视差滚动中的背景位置问题

我有一个普通javascript的视差滚动模式，它使用自定义的数据属性，并沿oposite方向滚动背景图像

HTML:

JAVASCRIPT:

{

    function parallax() {
        Array.from(document.querySelectorAll('*[data-type="background"]')).forEach(e => {

            let yPos = -(window.pageYOffset / e.dataset.speed);

            var coords = `50% ${yPos}px`;

            e.style.backgroundPosition = coords;
        });
    }

    document.addEventListener('scroll', function () {

        parallax();

    });

}

问题在于，此代码计算Ypos变量并将其分配给background position-y属性。实际上，它覆盖了css，在你开始滚动之前设置为50%。因此，一旦您开始滚动，图像就会从中心转到底部。我已经包括了一个代码笔来查看问题

是否有任何方法将yPos变量添加到初始化的背景位置50%50%，这意味着将其设置为50%50%+yPos而不是50%yPos

---

谢谢。

我更改了3->.02和javascript的速度，您必须从50%开始，减少这个百分比，而不是应用像素值

// let yPos = -(window.pageYOffset / e.dataset.speed);
let yPos = (e.getBoundingClientRect().top - window.pageYOffset) * e.dataset.speed + 50;

// var coords = `50% ${yPos}px`;
var coords = `50% ${yPos}%`;

您可以在此处查看更改：

---

还有一个问题。如果我在页面中添加另一个视差背景较低的标签，当我到达它时，它应该在开始视差之前处于起始位置，否则它将超出其容器的尺寸并重复自身，因为我有bg repeat:repeat。给你！对不起，如果文章在页面中的位置较低，速度也会更快。。。检查新的修复版本：

{

    function parallax() {
        Array.from(document.querySelectorAll('*[data-type="background"]')).forEach(e => {

            let yPos = -(window.pageYOffset / e.dataset.speed);

            var coords = `50% ${yPos}px`;

            e.style.backgroundPosition = coords;
        });
    }

    document.addEventListener('scroll', function () {

        parallax();

    });

}

// let yPos = -(window.pageYOffset / e.dataset.speed);
let yPos = (e.getBoundingClientRect().top - window.pageYOffset) * e.dataset.speed + 50;

// var coords = `50% ${yPos}px`;
var coords = `50% ${yPos}%`;