在 react-window 顶部显示导航栏

Question

我正在尝试在 React window 列表顶部显示导航栏。我正在使用 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>
  </>
);

Answer 1

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

body {
  overflow: hidden;
}

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

Answer 2

更改您的 dom 架构，使您的 header 在之外 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

在 react-window 顶部显示导航栏

Display navbar ontop of react-window

css

reactjs

react-window