React中使用scrollY实现垂直滚动图片动画失效问题求助

问题根源 #

1. 滚动事件绑定错误：你把onScroll绑定在了<h2>元素上，但该元素并非滚动容器，页面滚动时不会触发这个事件，需要监听全局window的滚动事件。
2. DOM操作不规范：直接用document.querySelector获取DOM元素不符合React组件思维，应该使用useRef安全引用DOM节点。
3. 缺少事件清理：不清理滚动监听会导致组件卸载后内存泄漏。

修复后的代码 #

import React, { useState, useRef, useEffect } from 'react'

export default function Home(props) {
  const manRef = useRef(null); // 用useRef获取图片元素

  const scrollHandle = () => {
    if (manRef.current) {
      // 处理边界，避免高度出现负数
      const height = Math.max(0, window.innerHeight - window.scrollY);
      manRef.current.style.height = `${height}px`;
    }
  }

  useEffect(() => {
    // 组件挂载时添加滚动监听
    window.addEventListener('scroll', scrollHandle);
    // 组件卸载时移除监听，防止内存泄漏
    return () => window.removeEventListener('scroll', scrollHandle);
  }, []); // 空依赖确保只执行一次

  return (
    <>
      <section id="top">
        <h2 id="text">{props.text}</h2> {/* 原代码未定义text变量，改为从props传入或自行定义 */}
        <img 
          src="https://aryan-tayal.github.io/Mountains-Parallax/man.png" 
          id="man" 
          ref={manRef} // 绑定ref
          alt='man' 
        />
      </section>
      <section id="sec">
        <h2>Welcome to the Mountains</h2>
        <p>
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. A earum ipsam laboriosam mollitia, architecto esse voluptates eligendi provident soluta et cupiditate sit nisi at dolorum iure dignissimos cumque amet necessitatibus blanditiis? Earum assumenda soluta reiciendis recusandae, incidunt tenetur nihil adipisci corrupti, quibusdam ullam numquam iusto veritatis facilis ab dicta, nobis inventore eius magni eveniet quo? Repellat nobis quos, facilis quam perspiciatis asperiores delectus, aliquid nihil molestias in at modi nulla minima deleniti. Minima aliquid magnam libero reiciendis et, nesciunt repellendus eum vel rerum alias ea enim fugiat eius. Quae dolores, amet nam ab officiis corrupti sequi eligendi quo culpa illum.
        </p>
      </section>
    </>
  )
}

额外说明 #

• 原代码中{text}变量未定义，需改为{props.text}或在组件内自行定义，避免渲染报错。
• 添加Math.max(0, ...)处理边界，防止滚动超过窗口高度时图片高度变为负数。
• 用useRef替代document.querySelector，符合React生命周期管理，避免不必要的DOM查询。

内容的提问来源于stack exchange，提问作者Anosh Younas