當組件關閉頁面時反應整個頁面滾動條

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>