当组件离开时，反应整页滚动条

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;
}

它根本没有添加任何东西，这是可能的，因为.App没有高度，但如果我添加高度，其余的内容被推下，所以它什么也解决了。我已经尝试将它添加到index.css html中，这给了我一个滚动条但它不能向下滚动。所以我在这里没有想法。我应该如何攻击这个？ z-index on .App？

Answer 1

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

＆＃13;

＆＃13;

  .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;
  }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;