0

I'm working my university project and i have a 4 pages , I want to know how to disable scrolling option only specific page. I'm using following code part, but its apply overall pages. any one have a solution ?

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


  export class MyBook extends React.Component<any, any> {
        
         render() {
               
                return (
<div></div>
       )
        }
        
}
core114
  • 5,155
  • 16
  • 92
  • 189
  • 1
    Set it back to `auto` when you need to have scroll. [`history.listen`](https://stackoverflow.com/a/62049352/2873538) may be useful. – Ajeet Shah Apr 23 '21 at 07:57
  • @AjeetShah Hello there, where is to adding this? – core114 Apr 23 '21 at 08:27
  • you can use [componentWillUnmount](https://reactjs.org/docs/react-component.html#componentwillunmount) method to reset the property `overflow` back to `auto` – kunal panchal Apr 23 '21 at 08:31
  • @AjeetShah But I want to disable scrolling only one page, I added you mentions answer but not working. So can you please put the answer? – core114 Apr 23 '21 at 08:37
  • @kunalpanchal ,I added you mentions answer but not working, So can you please put the answer? – core114 Apr 23 '21 at 08:37
  • one more solution for you may be you can do it using css as you want it just for one single page you can add `height:100%` to the first parent element of the component and assign the `overflow:hidden` property to it and remove the JavaScript code which is not need – kunal panchal Apr 23 '21 at 08:40

1 Answers1

1

Yes, you can

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

If you use clas approach


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

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

If you use func approach

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

be careful that componentWillMount depricated now

Egor Pashko
  • 354
  • 2
  • 8