css - div內部滾動,安卓沒有滾動條(非body滾動),有什么辦法可以顯示嗎?
問題描述
<!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.cgvv.com.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>
就這么一段代碼,頭尾固定,中間內容滾動,如果中間高度100%,頭尾fixed的話,滾動條會出現在頭尾,這是不允許的(哎)。那么現在這種情況下,在我沒有發現-webkit-overflow-scrolling: touch;之前ios是滾動非常卡的,現在用了這個之后,ios沒有任何問題了,滾動條什么的也沒事。那么安卓就出問題了,滾動稍微有點異常,但是還能接受,不過滾動條沒有了,搜多了好久,資料不是很多,有個說是谷歌之前安卓4.2時候支持p內滾動的,隨后很快就取消了,原因也沒有,解決辦法也沒有。其實這個問題在一年前就該提問了,當時手機端項目緊,我直接采取頭尾fixed,中間高度100%的方法解決了,現在重構想重新來,在滾動條上遇到問題了。剛剛又發現了一個改變點。一年前我的安卓手機在微信、QQ、chrome都沒有滾動條,現在的nexus6p在QQ和chrome有了滾動條,但是微信沒有滾動條(不知道是不是谷歌更新了什么),可是項目主要就是針對微信的。暫時也沒看其他安卓手機,他們應該至少微信也沒有滾動條,那么有什么解決辦法么?除了模擬滾動條。
問題解答
回答1:用iscroll、better-scroll等滾動插件
