美文网首页
下拉加载更多 记录当前位置。同微信聊天效果(锚点方式)

下拉加载更多 记录当前位置。同微信聊天效果(锚点方式)

作者: Spidd | 来源:发表于2021-05-11 10:20 被阅读0次
// dom
<div className={style['system-message-row']} key={id} id={`system-message-${id}`}>
  ...
</div>
// js
/* 由于数据更新一定是处于第一条数据处。
        所以这里获取历史数据中的第一条。
        加载完成后。获取锚点位置更新scroll位置 */
        // 上一次数据的第一条数据的id
        const firstDataId = dot.get(systemMessageList[0], '_id');
        // 上一次数据的第一条数据的dom
        const firstDataDom = document.querySelector(`#system-message-${firstDataId}`);
        await utils.lazy(60);
        // 更新位置
        setBottom(firstDataDom.offsetTop);

相关文章

网友评论

      本文标题:下拉加载更多 记录当前位置。同微信聊天效果(锚点方式)

      本文链接:https://www.haomeiwen.com/subject/hgdgdltx.html