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

mingde 发布于2019-08-02 10:09 / 660人阅读

摘要：使用具有回弹效果的滚动当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。

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

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

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

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

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

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

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

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

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

GPU云服务器云服务器 js 还原顶部 js页面顶部 js鼠标返回顶部 js 浮动回到顶部

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/52166.html

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

摘要：使用具有回弹效果的滚动当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。最近做了一个语音直播聊天的项目，有一个功能是当没有直播时，进入房间可以查看历史消息，滑动到顶部加载之前的历史消息，我用jquery scroll事件，来判断是否滚动到顶部，问题来了：首先触发请求事件之后，prepend插入到当前列表之前，而prepen...

jackwang 2019-08-22 16:13 评论0 收藏0
js移动端滑倒顶部加载历史消息解决方案!

摘要：使用具有回弹效果的滚动当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。最近做了一个语音直播聊天的项目，有一个功能是当没有直播时，进入房间可以查看历史消息，滑动到顶部加载之前的历史消息，我用jquery scroll事件，来判断是否滚动到顶部，问题来了：首先触发请求事件之后，prepend插入到当前列表之前，而prepen...

leejan97 2019-08-30 15:53 评论0 收藏0
分享一个移动端滑到底部翻页的代码

摘要：如果有其他需求，比如返回例子中直接返回，可以修改中的代码，就不赘述了今天在技术群看到有朋友有需求，就随手写了一个，大家随便看看~demo地址：http://www.dtzhuanjia.com/pri...（备注：这个主要用在移动端，所以用rem随便写了写样式= =PC看着不舒服用模拟器看吧） html: 下一页 ...

heartFollower 2019-08-21 11:25 评论0 收藏0
分享一个移动端滑到底部翻页的代码

摘要：如果有其他需求，比如返回例子中直接返回，可以修改中的代码，就不赘述了今天在技术群看到有朋友有需求，就随手写了一个，大家随便看看~demo地址：http://www.dtzhuanjia.com/pri...（备注：这个主要用在移动端，所以用rem随便写了写样式= =PC看着不舒服用模拟器看吧） html: 下一页 ...

hzc 2019-08-30 13:17 评论0 收藏0
分享一个移动端滑到底部翻页的代码

摘要：如果有其他需求，比如返回例子中直接返回，可以修改中的代码，就不赘述了今天在技术群看到有朋友有需求，就随手写了一个，大家随便看看~demo地址：http://www.dtzhuanjia.com/pri...（备注：这个主要用在移动端，所以用rem随便写了写样式= =PC看着不舒服用模拟器看吧） html: 下一页 ...

kumfo 2019-08-01 16:09 评论0 收藏0