如何修复我在普通JavaScript中编写的水平滚动脚本

Posted 2023-01-08

我根据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(-$translateThisMuchpx)`;
        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 * 4px`;
    

    requestAnimationFrame(horizontalScrollEnabler);
;

document.addEventListener("DOMContentLoaded", horizontalScrollEnabler);

答案

[好，问题是当您在水平滚动部分的起点之后向上滚动时，由于滚动可以轻松地绕过实现整个代码和X转换的起点，它可能会跳20px，10px或5 px，包装器保留它在向上滚动之前具有的Xtrasnlation，从而导致整个元素都不会被脚本翻译，因为向上滚动或向下滚动不会在每个滚动事件上进行1个像素。那么我们如何解决呢？我们可以将起点或终点延长几百个像素，因此，即使我们绕过了从终点向下滚动或从起点向上滚动导致的先前起点或终点，我们仍然可以访问scrolltop-起始元素offsetTop并定义它是否小于0，从而使wrapper元素的X的平移等于0，或者是否大于端点的位置，则它等于-X的平移等于端点。