IScroll5不能滑到最底端的解决办法

IScroll总体上用起来比较简单,但是如果用不好的可能会产生底部一点滚动不上去的问题。

环境:weui+iscroll5

整体布局及id如下

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内部元素底部会被挡一部分。

1、之前通过设置divscroll当前高度+一个额外高度解决,但有时加固定高度误差比较大,滑动到底部会有额外一段空白,用户体验不好。

2、开发者模式可以看到是总高度不对,即使设置内部元素margin也不行。

3、尝试使用网上说的加载完毕后refresh无效。

通过测试研究有两种解决办法:

1、设置postion:abolute;

2、设置#divscroll元素的padding-bottom:1px,设为0不起作用,设置1px即可。

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

 或者

#divscroll {
    padding-bottom:1px;
}

 实际项目中处理前后滚动到最底部时的效果(PS:虽然解决了,但不明白什么原因造成了这个问题,哪位同学如果知道的话请指点下。)

原文地址:https://www.cnblogs.com/zhaogaojian/p/10696090.html