vue和iview实现无限滚动的正确解法

本文探讨在Vue中使用iView的Scroll组件实现无限滚动聊天窗体时遇到的问题及解决方法。虽然iView Scroll提供了丰富的功能，但无法直接实现滚动条默认在底部。作者分享了通过放弃iView Scroll，改用div的overflow样式，从而达到滚动条置于底部的正确实现方式，详细解析了相关代码和DOM变化的监听机制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前几天做一个WEB端的实时在线聊天功能，需要用到无限滚动窗体。我UI框架用的是IVIEW，自然想到使用iview的Scroll去实现聊天窗体，但是使用下来遇到不少坑。网上google百度了好久，都没找到正确的解决之道，更有甚有些文章完全是误人子弟的。所以这几天想抽空写下这篇文章，帮助后人避开一些坑。

后续我会再写一篇文章分享在线聊天功能具体实现过程，所以这里只会讲解无限滚动窗体的实现。

无限滚动的聊天窗体基本要求

能够向上无限滚动历史信息；
窗体打开或发送信息，窗体滚动条默认在窗体底部；
向上滚动历史数据的时候需要有loading动作。

使用IVIEW Scroll实现

iview scroll功能也算强大，官方封装了很多功能：滚动加载更多，加载动画和加载文案，触边的动效和事件等。但是方法提供的API还是很少，一共也就下面几种：

Scroll props

属性	说明	类型	默认值
height	滚动区域的高度，单位像素	String \| Number	300
loading-text	加载中的文案	String	加载中
on-reach-top	滚动至顶部时触发，需返回 Promise	Function	-