<!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等滚动插件