在反应窗口顶部显示导航栏

Question

我正试图在react窗口列表顶部显示一个导航栏。我使用的是react窗口和react虚拟化的自动缩放器。问题是，当我在AutoSizer之外添加导航条时，它会创建另一个滚动条。沙箱。在没有创建另一个滚动条的情况下，我如何将导航条定位在列表顶部？

代码：

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

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