Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

disable scrolling on specific page

Tags:

css

reactjs

Is there any way to disable scroll on one single page? I tried to set overflow: hidden on the specific page but that didn't work. I have to set it on the body in index.css to make it work but that obviously disable scroll on all pages. So the only way to do it that comes to my mind is to set CSS class conditionally on the body. Is there any way to conditionally set CSS class in index.js based on the value from a redux store or is there any other way?

my index.js

import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter} from 'react-router-dom'
import {Provider} from 'react-redux'
import {createStore,applyMiddleware,compose,combineReducers} from "redux";
import thunk from 'redux-thunk'
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import authReducer from './store/reducers/auth'

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

const rootReducer = combineReducers({
   auth: authReducer
})

const store = createStore(rootReducer,
   composeEnhancers(applyMiddleware(thunk)));

const app =(
   <Provider store={store}>
      <BrowserRouter>
         <App/>
      </BrowserRouter>
   </Provider>
)

ReactDOM.render(
  <React.StrictMode>
     {app}
  </React.StrictMode>,
  document.getElementById('root')
);
serviceWorker.unregister();
like image 310
delmin Avatar asked Jul 22 '20 13:07

delmin


2 Answers

If you wanted to set a style on body, you can just run the below code on the page, which will disable scrolling.

document.body.style.overflow='hidden'

Then to re-enable:

document.body.style.overflow='auto'

Only downside is that is isn't very React-like.

like image 111
Luke Storry Avatar answered Sep 22 '22 10:09

Luke Storry


Simple solution might be to define specific class to apply overflow: hidden and apply it on document.body whenever you want (for example after explicit component mount).

.overflow-hidden {
   overflow: hidden;
}

On mount of specific page call:

document.body.classList.add("overflow-hidden");

or you can directly assign property

document.body.style.overflow = "hidden";
like image 22
Jax-p Avatar answered Sep 18 '22 10:09

Jax-p