如何解决如何在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”节点。
我的问题是:
- 如何使InfiniteScroll和OverlayScrollbarsComponent一起使用?
- 还有另一种使用其他库为InfiniteScroll自定义滚动条的方法吗?
谢谢!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。