如何修复我用 vanilla JavaScript 编写的水平滚动脚本

Question

我根据 YouTube 的一些想法制作了这个水平滚动页面，一切正常，逻辑也很好，但是 x 的翻译有问题，有时它翻译的 X 太多或有时低于应有的水平，有必须对 translateThisMuch const 进行更改，但我想不出任何事情，任何帮助将不胜感激。这是代码的链接https://codepen.io/AbramPlus/pen/RwwoPrW 请注意，当它从滚动部分的不同部分转到其他部分时，视口中仍然有一些其他部分。这是JS代码。

const spacer = document.querySelector(".spacer");

const spacerSecond = document.querySelector(".spacerSecond");

const wrapper = document.querySelector(".wrapper");

const windowEffect = document.querySelector(".windowEffect");

const horizontalScrollEnabler = () => {

 const scrollFromTop = window.scrollY;

const translateThisMuch = scrollFromTop - spacer.offsetTop;

const spacerHeight = window.innerWidth * 4 ;

const spacerSecondHeight = spacerSecond.offsetHeight;

    if (scrollFromTop > spacer.offsetTop && scrollFromTop < spacerSecond.offsetTop && scrollFromTop + window.innerHeight < spacerSecond.offsetTop + spacerSecond.offsetHeight) {

        windowEffect.style.position = "fixed";

        wrapper.style.transform = `translateX(-${translateThisMuch}px)`;

        windowEffect.style.top = "0";

    }

    if (scrollFromTop < spacer.offsetTop) {

        windowEffect.style.position = "absolute";

        windowEffect.style.top = "0";

    }

    if (scrollFromTop > spacer.offsetTop + spacerHeight) {

        windowEffect.style.position = "absolute";

        windowEffect.style.top = `${window.innerWidth * 4}px`;

    }

    requestAnimationFrame(horizontalScrollEnabler);

};

document.addEventListener("DOMContentLoaded", horizontalScrollEnabler);

Answer 1

好的，问题是当你在水平滚动部分的起点之后向上滚动时，由于滚动很容易绕过实现X的整个代码和平移的起点，它可能会跳20px，或10px，或5px，包装器保留了它在向上滚动之前的 Xtrasnlation，导致整个元素被脚本排除在外，因为在每个滚动事件中向上或向下滚动不是 1 个像素。那么我们该如何解决呢？我们可以将起点或终点扩展几百个像素，因此即使我们绕过由于从终点向下滚动或从起点向上滚动而导致的先前起点或终点，我们仍然可以访问 scrolltop - starter 元素'