css - div內(nèi)部滾動(dòng)，安卓沒(méi)有滾動(dòng)條（非body滾動(dòng)），有什么辦法可以顯示嗎？
問(wèn)題描述
<!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='http://www.aoyou183.cn/wenda/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)在這種情況下，在我沒(méi)有發(fā)現(xiàn)-webkit-overflow-scrolling: touch;之前ios是滾動(dòng)非?？ǖ?，現(xiàn)在用了這個(gè)之后，ios沒(méi)有任何問(wèn)題了，滾動(dòng)條什么的也沒(méi)事。那么安卓就出問(wèn)題了，滾動(dòng)稍微有點(diǎn)異常，但是還能接受，不過(guò)滾動(dòng)條沒(méi)有了，搜多了好久，資料不是很多，有個(gè)說(shuō)是谷歌之前安卓4.2時(shí)候支持p內(nèi)滾動(dòng)的，隨后很快就取消了，原因也沒(méi)有，解決辦法也沒(méi)有。其實(shí)這個(gè)問(wèn)題在一年前就該提問(wèn)了，當(dāng)時(shí)手機(jī)端項(xiàng)目緊，我直接采取頭尾fixed，中間高度100%的方法解決了，現(xiàn)在重構(gòu)想重新來(lái)，在滾動(dòng)條上遇到問(wèn)題了。剛剛又發(fā)現(xiàn)了一個(gè)改變點(diǎn)。一年前我的安卓手機(jī)在微信、QQ、chrome都沒(méi)有滾動(dòng)條，現(xiàn)在的nexus6p在QQ和chrome有了滾動(dòng)條，但是微信沒(méi)有滾動(dòng)條（不知道是不是谷歌更新了什么），可是項(xiàng)目主要就是針對(duì)微信的。暫時(shí)也沒(méi)看其他安卓手機(jī)，他們應(yīng)該至少微信也沒(méi)有滾動(dòng)條，那么有什么解決辦法么？除了模擬滾動(dòng)條。
問(wèn)題解答
回答1：用iscroll、better-scroll等滾動(dòng)插件
網(wǎng)公網(wǎng)安備