使用 React 到达页面的特定部分时，如何在滚动时水平移动文本？答案

【问题标题】：How to move text horizontally as you scroll when getting to a specific part of the page with React?使用 React 到达页面的特定部分时，如何在滚动时水平移动文本？
【发布时间】：2022-12-03 13:09:29
【问题描述】：

我的页面中间有两行文本，我希望它们从页面外部水平滚动以进入页面，然后从另一侧离开。最上面的一个来自左边，通过右边存在，第二行则相反。我的问题是，当您更改屏幕大小时，scrollY 不会保持不变。

当您到达页面的特定部分时，是否有一个很好的解决方案来滚动文本？现在，该部分在全视图中显示为 2200px，我正在使用该数字来触发滚动

我有这个监听滚动的钩子：

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;
}

在我有两行的页面中：

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]);

文本环绕在一个相对的 div 周围，文本有一个绝对位置，将元素向右或向左推 800 像素。

<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>

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

修复它的一种快速方法是在样式内的 html 中根据它与页面顶部的距离来计算它。

因此，例如，如果文本相距 100vh 且相距 10vh。

<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>

我没有运行它，对于运行代码时出现的任何错误深表歉意。

【讨论】：