最近做了一个语音直播聊天的项目,有一个功能是当没有直播时,进入房间可以查看历史消息,滑动到顶部加载之前的历史消息,我用jquery scroll事件,来判断是否滚动到顶部,问题来了:

首先触发请求事件之后,prepend插入到当前列表之前,而prepend元素会使scoll滚动到顶部,
显然这不是我想要的效果,我所要效果可以跟微信加载历史消息一样直接停留在上一页底部,

我设置一个全局变量,用来保存父元素的高度,先记录prepend之前父元素的高度,再用prepend之后的高度减去之前的高度,这就是我想要的滚动位置,然后用animate 滚动到这里(时间尽量设置短一点,负责页面抖动厉害):

js移动端滑倒顶部加载历史消息解决方案!-LMLPHP

然而ios浏览器滑动时会有卡顿现象,百度了下,此属性可解决ios滑动卡顿现象,

-webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果.
auto: 使用普通滚动, 当手指从触摸屏上移开,滚动会立即停止。
touch: 使用具有回弹效果的滚动, 当手指从触摸屏上移开,内容会继续保持一段时间的滚动效果。
继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。

加上此属性之后,在苹果手机里面设置scrollTop总是失败,在我查看了很多文章之后,发现设置
-webkit-overflow-scrolling:touchscrollTop有影响,具体原因,还有待研究。。。。

在我测试之后发现设置-webkit-overflow-scrolling:auto 对于scrollTop没有影响,

在我设置scrollTop之前先把-webkit-overflow-scrolling设置为auto,
设置完之后-webkit-overflow-scrolling设置为touch

js移动端滑倒顶部加载历史消息解决方案!-LMLPHP

希望大神有更好的解决方案多多指教,浏览器兼容着实是心累的不行.....

05-28 01:33