I'm currently working on an app that has a layout like this:
https://i.sstatic.net/w3fty.png
The middle component extends beyond the page, which is why I need a scrollbar to navigate down to it. However, I'm struggling to implement a regular whole page scrollbar. I tried attaching it directly to the middle component, but my goal is to have a standard scrollbar for the entire page.
Here is a snippet of my app.js file:
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've experimented with various CSS properties to address the issue, including setting overflows and heights in the .App class. However, none of these solutions seem to recognize that the component extends off the screen, making it impossible to scroll down to <OysterView />. I've also attempted modifying the HTML tag itself, but to no avail.
.App {
overflow-y: scroll;
background-color: #fafafa;
position: fixed;
height: 100vh;
width: 100vw;
z-index: -2
}
Adding a height to the .App class causes content to be pushed down, negating any progress. Additional attempts in the index.css stylesheet have resulted in a non-scrollable scrollbar. At this point, I'm out of ideas. Does anyone have suggestions on how to approach this? Perhaps utilizing z-index on .App?