h5页面使用fixed 套入app ios不兼容 会一闪一闪的

思路，把body设置成不能滚动，然后把固定的地方 fixed ,最后让需要滚动的部分滚动

代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>ios fixed不兼容 </title>
	</head>
	<style type="text/css">
		body,header{
			margin: 0;
			padding: 0;
			overflow: hidden;/*必要代码 让body不滚动*/
		}
		.mui-bar{
		    position: fixed;/*必要代码 让顶不固定*/
		    z-index: 1;
		    height: 44px;
		    line-height: 44px;
		    width: 100%;
		    background-color: palegreen;
		    text-align: center;
		}
		#mui-content{
			overflow: scroll;/*必要代码让页面滚动*/
		    -webkit-overflow-scrolling: touch;/*必要代码 让页面滚动流畅*/
		}
		ul li{
		    margin: 0;
		    padding: 0;
    		text-align: center;
    		list-style: none;
		}
 	</style>
	<body>
		<header class="mui-bar">标题</header>
		<div id="mui-content">
		    <ul>
		    	<li>ios fixed有问题</li>
		    	<li>ios fixed有问题</li>
		    	<li>ios fixed有问题</li>
		    	<li>ios fixed有问题</li>
		    	<li>ios fixed有问题</li>
		    	<li>ios fixed有问题</li>
		    	<li>ios fixed有问题</li>
		    	<li>ios fixed有问题</li>
		    	<li>ios fixed有问题</li>
		    	<li>ios fixed有问题</li>
		    	<li>ios fixed有问题</li>
		    	<li>ios fixed有问题</li>
		    	<li>ios fixed有问题</li>
		    	<li>ios fixed有问题</li>
		    	<li>ios fixed有问题</li>
		    	<li>ios fixed有问题</li>
		    	<li>ios fixed有问题</li>
		    	<li>ios fixed有问题</li>
		    	<li>ios fixed有问题</li>
		    	<li>ios fixed有问题</li>
		    	<li>ios fixed有问题</li>
		    	<li>ios fixed有问题</li>
		    	<li>ios fixed有问题</li>
		    	<li>ios fixed有问题</li>
		    	<li>ios fixed有问题</li>
		    	<li>ios fixed有问题</li>
		    	<li>ios fixed有问题</li>
		    	<li>ios fixed有问题</li>
		    	<li>ios fixed有问题</li>
		    	<li>ios fixed有问题</li>
		    	<li>ios fixed有问题</li>
		    	<li>ios fixed有问题</li>
		    	<li>ios fixed有问题</li>
				<li>ios fixed有问题</li>
		    	<li>ios fixed有问题</li>
		    	<li>ios fixed有问题</li>
		    	<li>ios fixed有问题</li>
		    	<li>ios fixed有问题</li>
		    	<li>ios fixed有问题</li>
		    	<li>ios fixed有问题</li>
		    	<li>ios fixed有问题</li>
		    	<li>ios fixed有问题</li>
		    	<li>ios fixed有问题</li>
		    	<li>ios fixed有问题</li>
		    	<li>ios fixed有问题</li>
		    	<li>ios fixed有问题</li>
		    	<li>ios fixed有问题</li>
		    	<li>ios fixed有问题</li>
		    </ul>
		</div>
		<script type="text/javascript">
			//动态给滚动的区域设置高度
			var height = window.screen.height;
			document.getElementById("mui-content").style.height=height+"px";
		</script>
	</body>
</html>

　　图说明

 
posted @ 2017-12-07 11:58  胖娘子_bug  阅读(958)  评论(0)    收藏  举报