關於移動端上下滑動卡頓不流暢現象的解決方案

添加一個屬性：

-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