<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
<script type="text/javascript" src="js/jquery-1.11.3.js" ></script>
<title></title>
<style>
* {
margin:0;
padding:0
}
header,footer {
width:100%;
height:80px;
background:lightblue;
}
.con {
height:calc(100vh - 160px);
overflow:scroll;
-webkit-overflow-scrolling: touch;
}
.list-box {
counter-reset: slideNum;
}
.list-box li {
list-style:none;
height:100px;
box-sizing:border-box;
border-bottom:5px solid #000;
background:pink;
}
.list-box li::before {
counter-increment: slideNum;
content: "[" counter(slideNum) "]";
}
</style>
</head>
<body>
<header></header>
<p class="con">
<ul class="list-box">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</p>
<footer></footer>
</body>
</html>
就这么一段代码，头尾固定，中间内容滚动，如果中间高度100%，头尾fixed的话，滚动条会出现在头尾，这是不允许的（哎）。那么现在这种情况下，在我没有发现-webkit-overflow-scrolling: touch;之前ios是滚动非常卡的，现在用了这个之后，ios没有任何问题了，滚动条什么的也没事。那么安卓就出问题了，滚动稍微有点异常，但是还能接受，不过滚动条没有了，搜多了好久，资料不是很多，有个说是谷歌之前安卓4.2时候支持p内滚动的，随后很快就取消了，原因也没有，解决办法也没有。其实这个问题在一年前就该提问了，当时手机端项目紧，我直接采取头尾fixed，中间高度100%的方法解决了，现在重构想重新来，在滚动条上遇到问题了。刚刚又发现了一个改变点。一年前我的安卓手机在微信、QQ、chrome都没有滚动条，现在的nexus6p在QQ和chrome有了滚动条，但是微信没有滚动条（不知道是不是谷歌更新了什么），可是项目主要就是针对微信的。暂时也没看其他安卓手机，他们应该至少微信也没有滚动条，那么有什么解决办法么？除了模拟滚动条。
用iscroll、better-scroll等滚动插件