グリッドコンポーネントとWebサイトのヘッダーを使用したダブルスクロールバーの回避

Question

<Grid>コンポーネントを使用するサイトに、Webサイトのヘッダーを追加しようとしています。ブラウザのスクロールバーと<Grid>スクロールバーが表示されないように、Webサイトのヘッダーをネストするにはどうすればよいですか？

グリッドを押し下げてウェブサイトのヘッダーを許可し、ウィンドウ/ブラウザで両方のスクロールを制御できるようにしたいとします。

私は、これらのコンポーネント私はhttps://bvaughn.github.io/react-virtualized/それが（VirtualScrollコンポーネントを使用して）正常に動作WindowScrollerに見 <WindowScroller><AutoSizer><Grid>

を使用しています。

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>