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

Question

我根据YouTube上的一些想法制作了这个水平滚动页面，一切正常，逻辑也很好，但是x的翻译有问题，有时它翻译X太多或有时低于应有的水平，必须对翻译这个多常量进行更改，但我什么也想不起来， 任何帮助将不胜感激。 这是代码 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 或 5 px，包装器保留它在向上滚动之前具有的 Xtrasnlation，导致整个元素被省略，不会被脚本传输， 因为向上滚动或向下滚动不是在每个滚动事件中都完成 1 个像素。那么我们如何解决它呢？ 我们可以将起点或终点仅扩展几百像素，因此即使我们绕过由从终点向下滚动或从起点向上滚动而导致的先前起点或终点，我们仍然可以访问 scrolltop - 起始元素的 offsetTop 并定义它是否小于 0，因此让包装元素的 X 的平移为 0 或更大比终点在哪里，它应该等于 X 的平移等于终点。