React.js中控制滚动事件监听及阻止滚动失效问题求助

一、为什么你的现有方法无效 #

• e.removeEventListener('scroll', handleScroll) 无效：React使用合成事件系统，onScroll绑定的事件并非直接挂载在DOM元素上的原生事件，直接调用原生removeEventListener找不到对应的监听函数。
• e.preventDefault() 无效：scroll事件是滚动完成后触发的回调，此时滚动动作已经发生，无法通过preventDefault阻止。要拦截滚动，得在触发滚动的源头（如鼠标滚轮、触摸滑动）事件上做处理。

二、方案1：特定条件下阻止滚动行为 #

如果需要在满足条件时禁止用户触发滚动，可以监听wheel（鼠标滚轮）和touchmove（触摸滑动）事件，在这些事件触发时判断条件并阻止默认行为。

代码示例：

import { useRef, useEffect } from 'react';

function YourComponent() {
  const mainRef = useRef(null);
  // 替换为你的业务状态值
  const valor = '';

  const handlePreventScroll = (e) => {
    // 这里替换成你的特定判断条件
    const shouldPrevent = mainRef.current?.scrollHeight === 0;
    if (shouldPrevent) {
      e.preventDefault();
      e.stopPropagation();
      return false;
    }
  };

  useEffect(() => {
    const mainElement = mainRef.current;
    if (mainElement) {
      // 添加滚动源头事件监听，必须设置passive: false才能生效preventDefault
      mainElement.addEventListener('wheel', handlePreventScroll, { passive: false });
      mainElement.addEventListener('touchmove', handlePreventScroll, { passive: false });

      // 组件卸载时移除监听，避免内存泄漏
      return () => {
        mainElement.removeEventListener('wheel', handlePreventScroll);
        mainElement.removeEventListener('touchmove', handlePreventScroll);
      };
    }
  }, []);

  return (
    <main ref={mainRef} data-status={valor}>
      <div>Conteudo</div>
    </main>
  );
}

三、方案2：特定条件下停止执行滚动回调 #

如果只是需要在满足条件时不再处理滚动逻辑，不需要阻止滚动动作，可以通过React状态控制回调是否执行：

代码示例：

import { useState } from 'react';

function YourComponent() {
  const [isScrollListening, setIsScrollListening] = useState(true);
  // 替换为你的业务状态值
  const valor = '';

  const handleScroll = (e) => {
    // 状态为false时直接退出，不执行后续逻辑
    if (!isScrollListening) return;

    const shouldStopListening = e.target.scrollHeight === 0;
    if (shouldStopListening) {
      setIsScrollListening(false);
      return;
    }

    // 这里写正常的滚动处理逻辑
    console.log('容器正在滚动');
  };

  // 若需要重新开启监听，在合适的时机调用setIsScrollListening(true)即可

  return (
    <main onScroll={handleScroll} data-status={valor}>
      <div>Conteudo</div>
    </main>
  );
}

四、额外场景：固定滚动位置 #

如果你的需求是在满足条件时将容器固定在某个滚动位置，可以直接操作DOM的scrollTop属性：

const handleScroll = (e) => {
  const shouldLockScroll = e.target.scrollHeight === 0;
  if (shouldLockScroll) {
    // 固定滚动到顶部，可替换为你需要的位置数值
    e.target.scrollTop = 0;
  }
};

内容的提问来源于stack exchange，提问作者José Henrique Queiroz