IScroll5不能滑到最底端的解決辦法

IScroll整體上用起來比較簡單,可是若是用很差的可能會產生底部一點滾動不上去的問題。css

環境:weui+iscroll5ajax

總體佈局及id以下app

searchbar
wrapper
   divscroll佈局

window.onload = function () {
    FillList();
}
function FillList() {
    try {if (myScroll == undefined || myScroll == null) loadedsroll();
        else myScroll.refresh();
    }
    catch (e) {
    }
}
var myScroll = null;
var wrapperheight = 0;
var isMore = false;   //是否可刷新標記
var pageIndex = 1;
var pageSize = 10;
//加載Iscroll
function loadedsroll() {
    setTimeout(function () {
        myScroll = new IScroll('#wrapper', { click: true });
        myScroll.on('scrollStart', function () {
            document.activeElement.blur();
        });
        myScroll.on('scrollEnd', function () {
            var temp_height = 0;
            temp_height = $("#wrapper").height();
            try {
                var hwindow = (window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight)- $('#searchBar').height();
                if (temp_height > hwindow)
                    temp_height = hwindow;
            }
            catch (e) { }
            $("#wrapper").height(temp_height);
            $("#divscroll").css("min-height", temp_height + 1);
            if (this.y <= this.maxScrollY) {
                if (isMore == false) {
                    $("#divscroll").height("");this.refresh();
                    return;
                }
                pageIndex = pageIndex + 1;
                FillList();
                this.refresh()
            } else {
                this.refresh()
            }
        });
    }, 100);
}

按上面的寫法通常沒有問題,支持ajax加載,只要把要加載的數據放到FillList中便可,如下內容是關鍵,不注意的話,divscroll內部元素底部會被擋一部分。post

一、以前經過設置divscroll當前高度+一個額外高度解決,但有時加固定高度偏差比較大,滑動到底部會有額外一段空白,用戶體驗很差。測試

二、開發者模式能夠看到是總高度不對,即便設置內部元素margin也不行。ui

三、嘗試使用網上說的加載完畢後refresh無效。this

經過測試研究有兩種解決辦法:spa

一、設置postion:abolute;code

二、設置#divscroll元素的padding-bottom:1px,設爲0不起做用,設置1px便可。

#divscroll {
    position: absolute;
    width: 100%;
}

 或者

#divscroll {
    padding-bottom:1px;
}

 實際項目中處理先後滾動到最底部時的效果(PS:雖然解決了,但不明白什麼緣由形成了這個問題,哪位同窗若是知道的話請指點下。)

相關文章
相關標籤/搜索