How to move text horizontally as you scroll when getting to a specific part of the page with React?

Question

I have two lines of text in the middle of my page that I want them to scroll horizontally from outside of the page to come in then leave through the other side. The top one comes from the left and exist through the right and the second line does the opposite. My problem is that scrollY does not stay constant when you change the screen size.

Is there a good solution to only scroll the text when you get to that particular section of the page? Right now the section comes in at 2200px when in full view and I'm using that number to trigger the scroll

I have this hook that listens for the scroll:

export default function useScrollListener() {
    const [data, setData] = useState({
        x: 0,
        y: 0,
        lastX: 0,
        lastY: 0
     });

    // set up event listeners
    useEffect(() => {
        const handleScroll = () => {
           setData((last) => {
               return {
                   x: window.scrollX,
                   y: window.scrollY,
                   lastX: last.x,
                   lastY: last.y
                };
            });
        };

    handleScroll();
    window.addEventListener("scroll", handleScroll);

    return () => {
        window.removeEventListener("scroll", handleScroll);
        };
    }, []);

    return data;
}

In the page that has the two lines I have:

const scroll = useScrollListener();
const [position, setPosition] = useState('')

useEffect(() => {
    let pos = scroll.y
    let scrollPos = pos - 3000
     
    // Section with the lines of text starts around 2200 on scrollY
    if(scroll.y > 2200){
        setPosition(scrollPos.toString())
    }
}, [scroll.y]);

The text is wrapped around a div that is relative and the text has a position absolute pushing the element to the right or left by 800px.

<div className="line1">
    <p className="text1" style={{"left": `${position}px`}}>
         Lorem ipsum dolor sit amet.
    </p>
</div>
 
<div className="line2">
    <p className="text1" style={{"right": `${position}px`}}>
         Lorem ipsum dolor sit amet.
    </p>
</div>

Answer 1

A quick way to fix it is to have in the in-style html calculate it based on how far it is from the top of the page.

So for example if the text was 100vh away and 10vh apart.

<div className="line1">
    <p className="text1" style={{"left": `calc(100vh - ${position}px`)}}>
         Lorem ipsum dolor sit amet.
    </p>
</div>
 
<div className="line2" style={{marginTop: "10vh"}}>
    <p className="text1" style={{"right": `calc(110vh - ${position}px`}}>
         Lorem ipsum dolor sit amet.
    </p>
</div>

I did not run this so sorry for any mistakes when running the code.