下拉加载 (主要用于加载聊天记录)

1.前提背景

加载历史聊天记录都是向上滑,也就是下拉加载,一般常见的事上拉加载下拉刷新,这个需求就反过来了

一直没找到相应的问题  只好自己动脑筋了

2.问题

上拉加载的时候,加载出来的元素就往页面末尾塞,此时滚动条是在原处没动的,加载出来就出来了,不会有不好的体验,但是反过来就不行了

在前面塞元素,滚动条就会往上跑,(其实滚动条还是没动,但是元素向上塞了很多,撑开的东西就铺开了,导致看起来是向上了,其实就是滚动条与顶端的距离没变,但是内容多了)

3.思路解决

与上拉加载反过来,  那就是保证滚动条与底部的距离不变  !!!

 

3.1 在元素塞进去之前  获取 height =  元素.scrollHeight - 元素.scrollTop     就是获取与底部的距离

3.2 在元素塞进去之后   元素.scrollTop = 元素.scrollHeight -  height (刚刚获取到的距离)    元素滚动上去的距离就是现在的总高度减去刚刚的固定底部

scrollHeight  滚动条总高度   scrollTop  滚动条距离顶部的高度

 

 

 

  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 6
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值