停止React.js中的滚动事件监听器

Question

我试图停止监听滚动事件，因为我需要控制事件何时应该滚动以及何时删除滚动事件。

我正在尝试电子预防，但它不起作用。有没有办法使用react-js来控制滚动？

const handleScroll = (e) => {
        //I need to stop scrolling when a certain condition is true
        if (e.target.scrollHeight == 0) {
            // e.removeEventListener('scroll', handleScroll); DOES NOT WORK
            //e.pree.preventdefault() DOES NOT WORK    
        } else {
            //Turn on the listenner
        }
       
    }

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

如果你们能帮助我，我真的很感激。谢谢大家，祝你有美好的一天。

Answer 1

尝试使用此代码：

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

const ExampleComponent = () => {
  const shouldEnableScroll = useRef(true);

  const handleScroll = (e) => {
    if (!shouldEnableScroll.current) {
      e.preventDefault(); // Prevent scrolling when shouldEnableScroll is false
    }

    // Your scrolling logic here
    if (e.target.scrollHeight === 0) {
      // Set shouldEnableScroll to false when a certain condition is true
      shouldEnableScroll.current = false;
    } else {
      // Set shouldEnableScroll to true when the condition is false
      shouldEnableScroll.current = true;
    }
  };

  useEffect(() => {
    // Add scroll event listener when the component mounts
    document.addEventListener('scroll', handleScroll);

    // Remove scroll event listener when the component unmounts
    return () => {
      document.removeEventListener('scroll', handleScroll);
    };
  }, []); // Empty dependency array means this effect runs once when the component mounts

  return (
    <main onScroll={handleScroll} data-status={shouldEnableScroll.current ? 'enabled' : 'disabled'}>
      <div>Conteudo</div>
    </main>
  );
};

export default ExampleComponent;

Answer 2

以下是实现此方法的方法：

import React, { useState, useEffect } from 'react';
import './App.css'; // Ensure you have the correct path to your CSS file

const ExampleComponent = () => {
  const [isScrollEnabled, setIsScrollEnabled] = useState(true);

  const handleScroll = (e) => {
    // Your condition to disable scrolling
    if (/* your condition here */) {
      setIsScrollEnabled(false);
    } else {
      setIsScrollEnabled(true);
    }
  };

  useEffect(() => {
    // Add scroll event listener when the component mounts
    window.addEventListener('scroll', handleScroll);

    // Clean up the event listener when the component unmounts
    return () => window.removeEventListener('scroll', handleScroll);
  }, []); // The empty array causes this effect to only run on mount and unmount

  return (
    <main className={isScrollEnabled ? '' : 'disable-scrolling'} onScroll={handleScroll}>
      <div>Content</div>
    </main>
  );
};

export default ExampleComponent;

在你的 CSS (App.css) 中：

.disable-scrolling {
  overflow: hidden;
  height: 100%; /* Or a specific height as needed */
}

此方法使用状态变量来跟踪是否应启用滚动并应用 CSS 类来控制实际滚动。这是一种更以 React 为中心的处理此问题的方法，非常适合 React 的声明性本质。此外，在组件卸载时清理事件侦听器是一个很好的做法，以避免内存泄漏和意外行为，这在 useEffect 清理函数中处理。