css - Display navbar ontop of react-window

Question

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>
  </>
);

Answer 1

更改您的 dom 架构，使您的标头位于AutoSizer

例如：

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

演示

Answer 2

在您的 style.css文件中，您可以添加

body {
  overflow: hidden;
}

这不是最优雅的解决方案，但我想它有效。