使用网格组件和网站避免双滚动条 header

Question

我正在尝试向我的站点添加一个使用 <Grid> 组件的网站 header。如何嵌套网站 header 以避免出现浏览器滚动条和 <Grid> 滚动条？

我想向下推网格以允许网站 header 同时允许 Window / 浏览器控制两者的滚动。

我正在使用这些组件 <WindowScroller><AutoSizer><Grid>

我在 https://bvaughn.github.io/react-virtualized/ 上看到 WindowScroller 可以正常工作（使用 VirtualScroll 组件）。

Answer 1

确保在内部 Grid 上指定 autoHeight 属性。属性告诉它溢出而不是滚动。

所以你想要这样的东西：

<WindowScroller>
  {({ height, isScrolling, scrollTop }) => (
    <AutoSizer disableHeight>
      {({ width }) => (
        <Grid
          autoHeight
          height={height}
          rowRenderer={({ index }) => this._rowRenderer({ index, isScrolling })}
          scrollTop={scrollTop}
          width={width}
          {..otherProps}
        />
      )}
    </AutoSizer>
  )}
</WindowScroller>

使用网格组件和网站避免双滚动条 header

Avoiding double scrollbars with Grid Component and a website header

react-virtualized