解决 InfiniteScroll 滚动 BUG

打小就很皮...2025-10-31 19:15

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

方案一：官方 Ant Design 方案

复制代码

<div
      id="scrollableDiv"
      style={{
        height: 400,
        overflow: 'auto',
        padding: '0 16px',
        border: '1px solid rgba(140, 140, 140, 0.35)',
      }}
    >
<InfiniteScroll
                            dataLength={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> ，以此实现滚动加载。

复制代码

<InfiniteScroll
          dataLength={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就能够实现滚动啦！