【React】「react-infinite-scroller」で実装した要素の親要素にoverflow:scroll;を指定する

先日、React で無限スクロールを簡単に実装できるライブラリ「react-infinite-scroller」をご紹介しましたが、こちらの記事内で、親要素に overflow: scroll; を指定していると、要素を一番下までスクロールしても、追加要素を読み込む関数が実行されないという現象が発生している、と記載しました。
が、react-infinite-scroller の Props の useWindow に false を指定することで、親要素に overflow: scroll; を指定しても追加読み込みの関数が呼び出されることが分かりました！

サンプルコードはこちらです。

<div className="scroll">
  <InfiniteScroll
    pageStart={0}
    loadMore={["追加要素を取得する処理"]}
    hasMore={true}
    initialLoad={false}
    useWindow={false}
    loader={<div className="loader" key={0}>Loading ...</div>}>
    {items}
  </InfiniteScroll>
</div>

.scroll {
  height: 500px;
  overflow: scroll;
}

6行目に追加した useWindow={false} がそうです。
こちらを指定することで、一番下までスクロールした時に loadMore に指定された関数が実行されるようになりました。
これでレイアウトが綺麗に整いました。
別に overflow: auto; でも、大きく画面が崩れるということはないのですが、個人的にはすごく気になっていたんですよね。
修正できて良かったです。

以上、React のライブラリ「react-infinite-scroller」で実装した無限スクロールの要素の親要素に overflow:scroll; を指定する方法でした。
ご参考になれば幸いです。