Next.js SSR页面中滚动到指定div时onScroll事件未触发

你绑定在<section>上的onScroll事件没触发，核心原因是：只有当元素自身存在滚动条（比如设置了overflow: auto/scroll且内容超出容器范围）时，滚动该元素才会触发它的onScroll事件。而你要实现的是「元素进入浏览器视口时触发操作」，这得用全局滚动监听或者专门的视口监听API，以下是具体解决思路：

方案一：使用Intersection Observer API（推荐） #

这是现代浏览器原生支持的高效API，专门用来监听元素是否进入/离开视口，性能远优于监听scroll事件，不会频繁触发回调。

实现步骤 #

1. 用useRef获取目标元素的DOM引用
2. 在useEffect中创建Observer实例（确保只在客户端执行，避免SSR环境报错）
3. 元素进入视口时执行数据获取逻辑，组件卸载时销毁Observer

示例代码 #

import { useEffect, useRef, useState } from 'react';
import styles from './YourComponent.module.css';

function YourComponent() {
  const targetRef = useRef(null);
  const [hasFetched, setHasFetched] = useState(false); // 避免重复触发请求

  useEffect(() => {
    const observer = new IntersectionObserver(
      (entries) => {
        const entry = entries[0];
        // 元素进入视口且未获取过数据时触发
        if (entry.isIntersecting && !hasFetched) {
          console.log('元素进入视口，开始获取数据');
          // 这里写你的数据请求逻辑：fetch('/api/your-data').then(...)
          setHasFetched(true);
        }
      },
      { threshold: 0.1 } // 元素进入视口10%时触发，可根据需求调整
    );

    if (targetRef.current) {
      observer.observe(targetRef.current);
    }

    // 组件卸载时停止监听
    return () => {
      if (targetRef.current) {
        observer.unobserve(targetRef.current);
      }
    };
  }, [hasFetched]);

  return (
    <section ref={targetRef} className={`${styles.notifTop} marginTop2 container`}>
      <p className={styles.notifTitle}>行动胜于空谈！</p>
      <p className={`${styles.notifParagraph}`}>无数<span className="fontWeight400">个人的微小行动</span>，终将完成那些我们无法再忽视的<span className="fontWeight400">集体大挑战</span>。</p>
    </section>
  );
}

export default YourComponent;

方案二：监听window滚动事件（兼容旧浏览器） #

如果需要兼容不支持Intersection Observer的旧浏览器，可以监听全局滚动事件，结合getBoundingClientRect()判断元素位置，记得加防抖避免性能问题。

示例代码 #

import { useEffect, useRef, useState } from 'react';
import styles from './YourComponent.module.css';

function YourComponent() {
  const targetRef = useRef(null);
  const [hasFetched, setHasFetched] = useState(false);
  const debounceTimeout = useRef(null);

  // 判断元素是否在视口内
  const checkElementInView = () => {
    if (!targetRef.current || hasFetched) return;

    const rect = targetRef.current.getBoundingClientRect();
    // 视口判断逻辑：元素顶部不超过视口高度，底部不小于0
    const isInView = rect.top <= window.innerHeight && rect.bottom >= 0;
    if (isInView) {
      console.log('元素进入视口，开始获取数据');
      // 数据请求逻辑：fetch('/api/your-data').then(...)
      setHasFetched(true);
      // 取消滚动监听，避免后续触发
      window.removeEventListener('scroll', handleScroll);
    }
  };

  // 防抖处理：300ms内只执行一次判断
  const handleScroll = () => {
    if (debounceTimeout.current) clearTimeout(debounceTimeout.current);
    debounceTimeout.current = setTimeout(checkElementInView, 300);
  };

  useEffect(() => {
    window.addEventListener('scroll', handleScroll);
    // 组件挂载时先检查一次，避免元素一开始就在视口内
    checkElementInView();

    return () => {
      window.removeEventListener('scroll', handleScroll);
      if (debounceTimeout.current) clearTimeout(debounceTimeout.current);
    };
  }, [hasFetched]);

  return (
    <section ref={targetRef} className={`${styles.notifTop} marginTop2 container`}>
      <p className={styles.notifTitle}>行动胜于空谈！</p>
      <p className={`${styles.notifParagraph}`}>无数<span className="fontWeight400">个人的微小行动</span>，终将完成那些我们无法再忽视的<span className="fontWeight400">集体大挑战</span>。</p>
    </section>
  );
}

export default YourComponent;

关键注意事项 #

• 所有依赖浏览器API的逻辑（比如window、IntersectionObserver）必须放在useEffect中，确保只在客户端执行，避免SSR阶段报错。
• 一定要用hasFetched这类状态标记，防止元素反复进出视口时重复触发数据请求。

内容的提问来源于stack exchange，提问作者Maxime Crtgn