首页 > 技术文章 > 关于移动端上下滑动卡顿不流畅现象的解决方案

sherryweb 2019-07-30 14:46 原文

添加一个属性:

-webkit-overflow-scrolling: touch

-webkit-overflow-scrolling控制元素在移动设备上面是否有滚动回弹效果,它可以设置成auto和touch

IOS 端特属属性,手指离开屏幕会保持滚动一段距离,继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。

overflow: scroll; //该属性随着手指离开立即停止

 

-webkit-overflow-scrolling: touch;   //该属性随着手指离开还会保持滚动

overflow-scrolling: touch;

 

 

 

 

 

1.嵌入的iframe页面无法滚动
  在iframe外层包裹一个div,然后将其设置为可滚动

<div style="webkit-overflow-scrolling: touch;overflow-y: scroll;">
  <iframe></iframe>
</div>

并且在禁止浏览器的默认行为,不然类似于微信滑动到底部的时候会和回弹的效果进行冲突

$('body').on('touchmove',function(e){
  e.preventDefault();
});

 

 

可以参考的博客:

https://blog.csdn.net/qq_43071910/article/details/83893324

https://blog.csdn.net/tinsine/article/details/79523060 

 

这些没有细看,但应该也有很好的参考价值:

https://www.jianshu.com/p/1f4693d0ad2d

https://blog.csdn.net/qq_35458527/article/details/79543565

https://blog.csdn.net/zzm_justin/article/details/8476373

https://blog.csdn.net/u012265444/article/details/72272152

推荐阅读