React whole page scrollbar when component goes offpage

Question

Okay so i got an app like this

as you can see the middle component continues down out of page and thats why i need a scrollbar to scroll down to it. but i can only make it work if i attach it directly on the middle component but i want a regular whole page scrollbar

here is my 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;

i have tried setting it on different places but it does not regonize that the component is out of bounds so cant scroll down the component is the component that is out of bound so i have tried in css

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

tried this aswell

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

wich doesnt add anything at all and that is probabl because .App has no height but if i add height the rest of the content gets pushed down so it solves nothing. i have tried adding it to the index.css html aswell and that gives me an scrollbar but it cant be scrolled down. so i am al out of ideas here. how should i attack this? z-index on .App?

Answer 1

You do have to scroll the component itself, just make its container full-screen so that the scrollbar will be on the right side of the window.

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