摘要:使用具有回弹效果的滚动当手指从触摸屏上移开,内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。
最近做了一个语音直播聊天的项目,有一个功能是当没有直播时,进入房间可以查看历史消息,滑动到顶部加载之前的历史消息,我用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
希望大神有更好的解决方案多多指教,浏览器兼容着实是心累的不行.....
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/94150.html
摘要:使用具有回弹效果的滚动当手指从触摸屏上移开,内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。 最近做了一个语音直播聊天的项目,有一个功能是当没有直播时,进入房间可以查看历史消息,滑动到顶部加载之前的历史消息,我用jquery scroll事件,来判断是否滚动到顶部,问题来了: 首先触发请求事件之后,prepend插入到当前列表之前,而prepen...
摘要:使用具有回弹效果的滚动当手指从触摸屏上移开,内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。 最近做了一个语音直播聊天的项目,有一个功能是当没有直播时,进入房间可以查看历史消息,滑动到顶部加载之前的历史消息,我用jquery scroll事件,来判断是否滚动到顶部,问题来了: 首先触发请求事件之后,prepend插入到当前列表之前,而prepen...
摘要:如果有其他需求,比如返回例子中直接返回,可以修改中的代码,就不赘述了 今天在技术群看到有朋友有需求,就随手写了一个,大家随便看看~demo地址:http://www.dtzhuanjia.com/pri...(备注:这个主要用在移动端,所以用rem随便写了写样式= =PC看着不舒服用模拟器看吧) html: 下一页 ...
摘要:如果有其他需求,比如返回例子中直接返回,可以修改中的代码,就不赘述了 今天在技术群看到有朋友有需求,就随手写了一个,大家随便看看~demo地址:http://www.dtzhuanjia.com/pri...(备注:这个主要用在移动端,所以用rem随便写了写样式= =PC看着不舒服用模拟器看吧) html: 下一页 ...
摘要:如果有其他需求,比如返回例子中直接返回,可以修改中的代码,就不赘述了 今天在技术群看到有朋友有需求,就随手写了一个,大家随便看看~demo地址:http://www.dtzhuanjia.com/pri...(备注:这个主要用在移动端,所以用rem随便写了写样式= =PC看着不舒服用模拟器看吧) html: 下一页 ...
阅读 1748·2021-09-03 10:50
阅读 1304·2019-08-30 15:55
阅读 3342·2019-08-30 15:52
阅读 1200·2019-08-30 15:44
阅读 887·2019-08-30 15:44
阅读 3280·2019-08-30 14:23
阅读 3525·2019-08-28 17:51
阅读 2255·2019-08-26 13:52