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

【问题标题】：Display navbar ontop of react-window在反应窗口顶部显示导航栏
【发布时间】：2021-04-02 16:26:54
【问题描述】：

我正在尝试在反应窗口列表顶部显示导航栏。我正在使用 react-window 和 react-virtualized-auto-sizer。问题是当我在AutoSizer 之外添加导航栏时，它会创建另一个滚动条。 sandbox。如何在不创建另一个滚动条的情况下将导航栏定位在列表顶部？

代码：

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

【问题讨论】：

标签： css reactjs react-window

【解决方案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>
);

Demo

【讨论】：

【解决方案2】：

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

body {
  overflow: hidden;
}

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

【讨论】：