I'm trying to display a navbar on top of react window list. I'm using react-window and react-virtualized-auto-sizer. The problem is that when I add the navbar outside the AutoSizer
it creates another scroll bar. sandbox. How could I position the navbar ontop of the list without another scroll bar being created?
Code:
const Row = ({ index, style }) => (
<div style={style}>Row {index}</div>
);
const Homepage = () => (<>
<div style={{ width: "100%", height: "100vh", overFlow: "hidden"}}>
<Navbar /> // this causes a second scroll bar
<AutoSizer>
{({ width, height }) => (
<>
<List
height={height}
itemCount={1000}
itemSize={35}
width={width}
>
{Row}
</List>
</>
)}
</AutoSizer>
</div>
</>
);
Change your dom architecture so your header is outside the AutoSizer
For example:
const App = () => (
<div style={{ width: "100%", height: "100vh" }}>
<div style={{ height: "10vh", backgroundColor: "lightgrey" }}>
header here
</div>
<div style={{ height: "80vh" }}>
<AutoSizer>
{({ width, height }) => (
<>
<List height={height} itemCount={1000} itemSize={35} width={width}>
{Tester}
</List>
</>
)}
</AutoSizer>
</div>
<div style={{ height: "10vh", backgroundColor: "lightgrey" }}>
footer here
</div>
</div>
);