vue：项目页面在苹果手机浏览器上上下滑动出现卡顿现象

https://blog.csdn.net/huangxiaoguo1/article/details/80307887

1.ios端的-webkit-overflow-scrolling属性可控制页面滚动效果，设置如下实现惯性滚动和弹性效果：

-webkit-overflow-scrolling: touch

2.position属性导致的页面滚动不流畅问题：

<div style="overflow-x: hidden; overflow-y: auto; position: absolute; height: 200px;">
    <div style="position: relative; height: 200px;"></div>
    <div style="position: relative; height: 200px;"></div>
    <div style="position: relative; height: 200px;"></div>
</div>

如上代码所示，当absolute定位的容器内存在relative定位并且高度大于外置容器时，容器的滚动会出现卡顿闪烁现象，解决方法如下所示：

<div style="overflow-x: hidden; overflow-y: auto; position: absolute; height: 200px;">
    <div style="position: absolute; top: 0; left: 0;">
        <div style="position: relative; height: 200px;"></div>
        <div style="position: relative; height: 200px;"></div>
        <div style="position: relative; height: 200px;"></div>
    </div>
</div>

可以用一个absolute容器将内部relative元素包裹起来，便可解决滚动闪烁问题。

				<script>
					(function(){
						function setArticleH(btnReadmore,posi){
							var winH = $(window).height();
							var articleBox = $("div.article_content");
							var artH = articleBox.height();
							if(artH > winH*posi){
								articleBox.css({
									'height':winH*posi+'px',
									'overflow':'hidden'
								})
								btnReadmore.click(function(){
									if(typeof window.localStorage === "object" && typeof window.csdn.anonymousUserLimit === "object"){
										if(!window.csdn.anonymousUserLimit.judgment()){
											window.csdn.anonymousUserLimit.Jumplogin();
											return false;
										}else if(!currentUserName){
											window.csdn.anonymousUserLimit.updata();
										}
									}
									
									articleBox.removeAttr("style");
									$(this).parent().remove();
								})
							}else{
								btnReadmore.parent().remove();
							}
						}
						var btnReadmore = $("#btn-readmore");
						if(btnReadmore.length>0){
							if(currentUserName){
								setArticleH(btnReadmore,3);
							}else{
								setArticleH(btnReadmore,1.2);
							}
						}
					})()
				</script>
				</article>