React项目中jQuery滚动逻辑跨页面报错的修复咨询

错误根源 #

你加的try-catch没起作用，是因为它只包裹了绑定scroll事件的代码，而滚动触发回调时的错误是在事件执行阶段，不在这个try块里。另外React是单页应用，导航到其他页面后，你给document绑定的scroll事件不会自动解绑，这时页面里没有.icon-box元素，tags[0]是undefined，$(tags[0])是空jQuery对象，调用.position().top自然会报错。

修复方案 #

方案1：在事件回调里先做元素存在性校验 #

直接在滚动回调里判断是否存在目标元素，没有就直接退出，避免后续错误代码执行：

$(() => {
  // 把事件回调存成变量，方便后续解绑
  const handleScroll = function() {
    const pageTop = $(document).scrollTop();
    const pageBottom = pageTop + $(window).height();
    const $tags = $(".icon-box");

    // 先判断是否存在目标元素，不存在直接退出
    if ($tags.length === 0) return;

    // 用jQuery的each遍历元素，替代手动for循环
    $tags.each(function() {
      const $tag = $(this);
      if ($tag.position().top < pageBottom) {
        $tag.addClass("visible");
      } else {
        $tag.removeClass("visible");
      }
    });
  };

  $(document).on("scroll", handleScroll);
});

方案2：结合React组件生命周期管理事件（推荐） #

因为是首页的特效，把逻辑放在首页的React组件里，利用useEffect的清理函数在组件卸载（离开首页）时自动解绑scroll事件，从根源上避免其他页面触发这个回调：

import { useEffect } from 'react';

function HomePage() {
  useEffect(() => {
    const handleScroll = () => {
      const pageTop = $(document).scrollTop();
      const pageBottom = pageTop + $(window).height();
      const $tags = $(".icon-box");

      if ($tags.length === 0) return;

      $tags.each(function() {
        const $tag = $(this);
        if ($tag.position().top < pageBottom) {
          $tag.addClass("visible");
        } else {
          $tag.removeClass("visible");
        }
      });
    };

    $(document).on("scroll", handleScroll);

    // 组件卸载时解绑事件
    return () => {
      $(document).off("scroll", handleScroll);
    };
  }, []);

  return (
    {/* 首页内容，包含.icon-box元素 */}
    <div className="home-page">
      <div className="icon-box">...</div>
      <div className="icon-box">...</div>
    </div>
  );
}

export default HomePage;

额外优化点 #

• 缓存jQuery对象（比如$tags），避免重复查询DOM
• 给scroll事件加节流，减少触发频率提升性能：

  // 简单节流函数
  function throttle(func, delay) {
    let timer = null;
    return function() {
      if (!timer) {
        timer = setTimeout(() => {
          func.apply(this, arguments);
          timer = null;
        }, delay);
      }
    };
  }
  
  // 绑定节流后的事件
  const throttledHandleScroll = throttle(handleScroll, 100);
  $(document).on("scroll", throttledHandleScroll);
  // 解绑也要用节流后的函数
  return () => {
    $(document).off("scroll", throttledHandleScroll);
  };
  

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