<!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>
就這麼一段程式碼,頭尾固定,中間內(nèi)容滾動(dòng),如果中間高度100%,頭尾fixed的話,滾動(dòng)條會(huì)出現(xiàn)在頭尾,這是不允許的(哎)。那麼現(xiàn)在這種情況下,在我沒有發(fā)現(xiàn)-webkit-overflow-scrolling: touch;之前ios是滾動(dòng)非??ǖ?,現(xiàn)在用了這個(gè)之後,ios沒有任何問題了,滾動(dòng)條什麼的也沒事。那麼安卓就出問題了,滾動(dòng)稍微有點(diǎn)異常,但是還能接受,不過滾動(dòng)條沒有了,搜多了好久,資料不是很多,有個(gè)說是谷歌之前安卓4.2時(shí)候支持p內(nèi)滾動(dòng)的,隨後很快就取消了,原因也沒有,解決方法也沒有。其實(shí)這個(gè)問題在一年前就該提問了,當(dāng)時(shí)手機(jī)端項(xiàng)目緊,我直接採取頭尾fixed,中間高度100%的方法解決了,現(xiàn)在重構(gòu)想重新來,在滾動(dòng)條上遇到問題了。剛剛又發(fā)現(xiàn)了一個(gè)改變點(diǎn)。一年前我的安卓手機(jī)在微信、QQ、chrome都沒有滾動(dòng)條,現(xiàn)在的nexus6p在QQ和chrome有了滾動(dòng)條,但是微信沒有滾動(dòng)條(不知道是不是谷歌更新了什麼),可是項(xiàng)目主要是針對(duì)微信的。暫時(shí)也沒看其他安卓手機(jī),他們應(yīng)該至少微信也沒有滾動(dòng)條,那麼有什麼解決方法呢?除了模擬滾動(dòng)條。
認(rèn)證0級(jí)講師