关于移动端上下滑动卡顿不流畅现象的解决方案

添加一个属性：

-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

转载于:https://www.cnblogs.com/sherryweb/p/11269973.html