1.前提背景
加载历史聊天记录都是向上滑,也就是下拉加载,一般常见的事上拉加载下拉刷新,这个需求就反过来了
一直没找到相应的问题 只好自己动脑筋了
2.问题
上拉加载的时候,加载出来的元素就往页面末尾塞,此时滚动条是在原处没动的,加载出来就出来了,不会有不好的体验,但是反过来就不行了
在前面塞元素,滚动条就会往上跑,(其实滚动条还是没动,但是元素向上塞了很多,撑开的东西就铺开了,导致看起来是向上了,其实就是滚动条与顶端的距离没变,但是内容多了)
3.思路解决
与上拉加载反过来, 那就是保证滚动条与底部的距离不变 !!!
3.1 在元素塞进去之前 获取 height = 元素.scrollHeight - 元素.scrollTop 就是获取与底部的距离
3.2 在元素塞进去之后 元素.scrollTop = 元素.scrollHeight - height (刚刚获取到的距离) 元素滚动上去的距离就是现在的总高度减去刚刚的固定底部
scrollHeight 滚动条总高度 scrollTop 滚动条距离顶部的高度