解决 InfiniteScroll 滚动 BUG

在之前实现滚动加载方案有

方案一：官方 Ant Design 方案

<divid="scrollableDiv"style={{height: 400,overflow: 'auto',padding: '0 16px',border: '1px solid rgba(140, 140, 140, 0.35)',}}>
<InfiniteScrolldataLength={modelDesc.length}next={loadMore}hasMore={hasMore}loader={<div className={styles.loading}>加载中...</div>}endMessage={<div style={{ textAlign: 'center' }}>已加载全部数据</div>}scrollableTarget="scrollContainer">
</div>

通过在外层嵌套标签<div>并添加id="scrollableDiv"属性，InfiniteScroll 中直接绑定这个属性scrollableTarget="scrollableDiv"实现滚动加载。

方案二：InfiniteScroll 直接添加 height 属性

与外层标签<div> scrollableDiv绑定失效，导致无法实现滚动加载，进入官方文档排查之后直接在

InfiniteScroll 标签中添加 height 属性，height={700}，不使用外层标签 <div> ，以此实现滚动加载。

<InfiniteScrolldataLength={allMessages.length}next={handleOnLoad}hasMore={hasMore}endMessage={(() => {return allMessages.length === 0 ? null : (<div style={{ textAlign: 'center' }}>已加载全部数据</div>);})()}height='calc(100vh - 200px)'className={styles.scrollContainer}>

方案三：通过动态计算

前两者实现起来都有问题的情况下
触发失效时机：笔记本显示以及显示器显示，两者的屏幕大小是不一样的

显示器正常显示 List 列表数据四条，当我将本地项目从显示器拖拽到笔记本显示后

变为了

其实数据在列表中，这时候是在缩放比为正常100%的情况下之下，当我缩小比例还是正常显示，但是按正常的交互来说这肯定是不对的。

因此代码修改只需替换 height：

height='calc(100vh - 200px)'

当前的视口100vh减去内容 InfiniteScroll 除外的固定200px就能够实现滚动啦！