此方法在安卓6的自帶下拉刷新的APP內無效。
做移動app項目時,用的是app內嵌webview的方法,遇到問題。
在安卓6中,app原生自帶下拉刷新,與界面內的下滑衝突。
開始考慮通過在touchmove時阻止默認事件解決,但event.preventDefault()是會把所有事件都阻止了。
即使阻止完再移除監聽事件,也不行,這是個持續的過程,因爲無法改變APP的原生內容。此路不通。
建議讓開發app的人員解決這個問題。如果此路不通,考慮其他方法。
考慮用iScroll插件解決,插件iScroll的原理是通過css的transform效果實現。
iScroll 文檔:http://caibaojian.com/iscroll-5/
demo:固定表頭滾動(移動端)如果表格很長,不止需要縱向滾動,還需要橫向和表頭一起滾動。
html:
<head><script src="js/iscroll-probe.js"></script></head>
<div id="c">
<div class="m">sdmdonifoinvomsldmkcoerijoaopmr</div>
<div class="f">
<ul class="d">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
</ul>
</div>
</div>
css:
這裏 body 要加屬性 position:fixed; 防止蘋果手機下拉反彈問題。
這裏 f 的 overflow-y 要設置成hidden,因爲蘋果手機兼容問題。
html,body,div,ul,li{
margin:0;
padding:0;
}
#c{
position:relative;
width:500px;
background-color: #f5e79e;
overflow-y:hidden;
overflow-x:auto;
}
.m{
width:600px;
height:50px;
background-color: #2d6ca2;
}
.f{
position:relative;
width:600px;
height:400px;
background-color: #2ECC40;
overflow-y:auto;
}
.d{
width:600px;
height:800px;
background-color: #cccccc;
}
li{
display:block;
height:100px;
list-style: none;
font-size:28px;
}
js:
var myScroll=new IScroll(".f",{
scrollbars: true,//顯示滾動條
bounce:false,//反彈動畫不顯示
eventPassthrough:'horizontal',//橫向滾動條保持原生,縱向滾動條使用iScroll
fadeScrollbars:true,//淡入淡出
});
自己做過嘗試,通過阻止默認事件,改變要滾動元素的margin-top或者top,來做滾動效果,但在touchmove時,沒能精準計算出移動距離。做個紀念吧。。。