React.js帖子页如何监听滚动获取当前post_id并同步后端实现浏览续看

优先使用浏览器原生IntersectionObserverAPI实现可见性判断，比手动监听scroll事件性能高很多，可以同时满足两个功能的需求。

共用基础：封装可见性监听自定义Hook #

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

// 通用可见性监听Hook
const useIntersectionObserver = (options = {}) => {
  const [isIntersecting, setIsIntersecting] = useState(false);
  const ref = useRef(null);

  useEffect(() => {
    const observer = new IntersectionObserver(([entry]) => {
      setIsIntersecting(entry.isIntersecting);
    }, {
      threshold: 0.5, // 元素50%进入可视区即判定为可见，可自行调整
      root: null, // 默认为浏览器视口
      ...options
    });

    const currentRef = ref.current;
    if (currentRef) observer.observe(currentRef);

    return () => {
      if (currentRef) observer.unobserve(currentRef);
    };
  }, [options]);

  return [ref, isIntersecting];
};

功能1：记录浏览位置、下次访问自动恢复 #

实现逻辑：

• 滚动停止后，判定当前视口内占比最高的帖子为用户正在浏览的主帖子，将post_id存入localStorage
• 页面首次加载、帖子列表渲染完成后，读取本地存储的post_id，找到对应元素滚动到对应位置

列表页位置恢复代码 #

// 帖子列表页
const PostList = ({ posts }) => {
  const [postsLoaded, setPostsLoaded] = useState(false);

  // 初始化时恢复浏览位置
  useEffect(() => {
    if (!postsLoaded) return;
    const lastPostId = localStorage.getItem('lastViewedPostId');
    if (!lastPostId) return;

    const targetPost = document.querySelector(`[data-post-id="${lastPostId}"]`);
    if (targetPost) {
      // 滚动到对应位置，block参数可选'start'/'center'，behavior设为auto无滚动动画
      targetPost.scrollIntoView({ block: 'start', behavior: 'auto' });
    }
  }, [postsLoaded, posts]);

  // 滚动停止后更新当前浏览的主帖子
  useEffect(() => {
    let scrollTimer;
    const handleScroll = () => {
      clearTimeout(scrollTimer);
      scrollTimer = setTimeout(() => {
        // 找到当前视口顶部30%区域内的第一个帖子作为主浏览帖
        posts.forEach(post => {
          const rect = document.querySelector(`[data-post-id="${post.post_id}"]`)?.getBoundingClientRect();
          if (rect && rect.top >= 0 && rect.top < window.innerHeight * 0.3) {
            localStorage.setItem('lastViewedPostId', post.post_id);
          }
        });
      }, 200); // 滚动停止200ms后触发判定，可调整
    };
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, [posts]);

  useEffect(() => {
    // 监听帖子列表加载完成状态
    if (posts.length) setPostsLoaded(true);
  }, [posts]);

  // 曝光上报回调见功能2
  const handlePostView = (postId) => {
    fetch('/api/report/post-view', {
      method: 'POST',
      body: JSON.stringify({ postId }),
      headers: { 'Content-Type': 'application/json' }
    });
  };

  return (
    <div className="post-list">
      {posts.map(post => (
        <PostItem
          key={post.post_id}
          postId={post.post_id}
          content={post.content}
          onView={handlePostView}
        />
      ))}
    </div>
  );
};

功能2：帖子曝光上报 #

实现逻辑：

• 每个帖子组件绑定可见性监听，首次进入可视区时触发上报
• 用Set存储已经上报过的post_id，避免同一个帖子重复上报

单个帖子组件代码 #

const PostItem = ({ postId, content, onView }) => {
  const [ref, isIntersecting] = useIntersectionObserver();
  // 存储已上报的id，避免重复上报
  const reportedSet = useRef(new Set());

  useEffect(() => {
    if (isIntersecting && !reportedSet.current.has(postId)) {
      reportedSet.current.add(postId);
      // 触发上报回调
      onView?.(postId);
    }
  }, [isIntersecting, postId, onView]);

  return <div ref={ref} data-post-id={postId}>{content}</div>;
};

注意事项 #

• 阈值调整：IntersectionObserver的threshold参数可根据业务调整，需要帖子完全露出才触发就设为1，只要露出10%就算就设为0.1
• 上报优化：可把多次曝光的postId攒成数组，每隔1秒或者页面隐藏时批量上报，减少接口请求次数
• 存储有效期：可以给lastViewedPostId加存储有效期，超过7天自动清空，避免用户很久之后访问还跳转到历史位置
• 边界处理：如果恢复位置时对应postId的帖子已经被删除、不在当前加载列表里，直接降级滚动到列表顶部即可

内容的提问来源于stack exchange，提问作者Mouaz ALbari