当组件关闭页面时反应整个页面滚动条

Question

好吧，我有一个这样的应用程序

如您所见，中间组件在页面外继续向下，这就是为什么我需要滚动条才能向下滚动到它。 但是如果我直接将其附加在中间组件上，但是我想要一个规则的整个页面滚动条，就只能使它工作

这是我的app.js

import React, { Component } from 'react';
import OysterView from './components/OysterView.js'
import './uikit/uikit.css';
import './App.css';
import logo from './uikit/assets/images/hrm-white.svg';

class App extends Component {
  render() {
    return (
    <div className="App">      
      <div className="App-header">
        <header>
          <img src={logo} className="App-logo" alt="HRM"/>
        </header>
      </div>
      <div className="OysterView">
       <OysterView />
       </div>
    </div>
    );
  }
}

export default App;

我尝试将其设置在不同的位置，但是它不会使组件超出范围，因此无法向下滚动组件是超出范围的组件，因此我尝试了在CSS中

  .App {
  overflow-y: scroll;
  background-color: #fafafa;
 position: fixed;
  height: 100vh;
  width: 100vw;
  z-index: -2
}

也尝试过

html{
height: 100%;
overflow-y: scroll;
margin: 0;
padding: 0;
}

wich根本不添加任何内容，这很可能是因为.App没有高度，但是如果我添加高度，则其余内容将被下推，因此它无法解决任何问题。 我试图将它也添加到index.css html中，这给了我一个滚动条，但无法向下滚动。 所以我在这里没有想法。 我该怎么攻击呢？ .app上的Z-index？

Answer 1

您必须滚动组件本身，只需使其容器全屏显示，以便滚动条位于窗口的右侧。

  .modal-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba( 0, 0, 0, .5 ); overflow-y: scroll; } .modal-content { background: red; margin: 20%; height: 2000px; } 

 Page content <div class="modal-container"> <div class="modal-content"> Modal content </div> </div>