如何在reactjs中一起使用OverlayScrollbarsComponent和InfiniteScroll

问题描述

我想使用OverlayScrollbarsComponent自定义滚动条显示主题，并使用InfiniteScroll加载更多数据效果。
这是我的代码演示

render() {
   const scrollbarOptions = {
      scrollbars: { autoHide: 'scroll' },overflowBehavior : {x: 'scroll'}
    }

    return (<>
         <OverlayScrollbarsComponent options={scrollbarOptions} ref={this.overlayScrollBar} id="templateScrollBarId" >
             <InfiniteScroll
                  initialLoad={false}
                  pageStart={0}
                  loadMore={this.handleInfiniteOnLoad}
                  hasMore={!this.state.loading && this.state.hasMore}
                  useWindow={false}
                  scrollableTarget="templateScrollBarId"
             >
                ....
             </>
         </OverlayScrollbarsComponent>
    </>)
}

注意： 在jquery中，我使用此设置将Overlay滚动条附加到InfiniteScroll scrol。

.infiniteScroll({
  elementScroll: '#resultsLayout .os-viewport',});

但是在Reactjs项目文件中， scrollableTarget 需要“节点或字符串”：
（可选，引用已经为InfiniteScroll组件提供溢出滚动条的（父）DOM元素。您最好提供DOM节点的ID。）
但是我不知道如何在React.js中获得“ os-viewport”节点。

我的问题是：

1. 如何使InfiniteScroll和OverlayScrollbarsComponent一起使用？
2. 还有另一种使用其他库为InfiniteScroll自定义滚动条的方法吗？

谢谢！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）