如何在 React Typescript 中禁用滚动特定页面

Question

我正在做我的大学项目，我有 4 页，我想知道如何禁用仅特定页面的滚动选项。我正在使用以下代码部分，但它适用于整个页面。有人有解决方案吗？

componentWillMount(){
        document.body.style.overflow='hidden'
    }

  export class MyBook extends React.Component<any, any> {
        
         render() {
               
                return (
<div></div>
       )
        }
        
}

Answer 1

是的，你可以

<Pages>
  <Page1 />
  <Page2 />
  ...
</ Pages>

如果你使用类方法


class Page2 extends React.Component {
   componentDidMount() {
      document.body.style.overflow='hidden'
   }

   componentWillUnMount() {
      document.body.style.overflow='auto'
   }
}

如果你使用 func 方法

useEffect(() => {
    document.body.style.overflow = "hidden";
    return () => {
      document.body.style.overflow = "auto";
    };
  }, []);

注意 componentWillMount 现在已被删除

如何在 React Typescript 中禁用滚动特定页面

How to disable scroller specify page in React Typescript

reactjs

react-typescript