禁用特定页面上的滚动

Question

有什么办法可以禁用单个页面上的滚动吗？我尝试在特定页面上进行设置overflow: hidden，但没有成功。我必须将其设置在正文上index.css才能使其正常工作，但这显然会禁用所有页面上的滚动。所以我想到的唯一方法是在 body 上有条件地设置 CSS 类。有没有办法根据 redux 存储中的值有条件地在 index.js 中设置 CSS 类，或者还有其他方法吗？

我的索引.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();

Answer 1

如果你想在 上设置样式body，你可以在页面上运行以下代码，这将禁用滚动。

document.body.style.overflow='hidden'

然后重新启用：

document.body.style.overflow='auto'

唯一的缺点是它不太像 React。