移動端下拉刷新與頁面內滑動衝突問題 iscroll 固定行表頭 蘋果下拉反彈

此方法在安卓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時,沒能精準計算出移動距離。做個紀念吧。。。

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章