zoukankan      html  css  js  c++  java
  • 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:虽然解决了,但不明白什么原因造成了这个问题,哪位同学如果知道的话请指点下。)

  • 相关阅读:
    python2.7 pip
    opencv
    运维url收集
    转 string和byte[]的转换 (C#)
    Thrift
    Oracle AWR
    并发编程
    LED相关
    java mail 使用 gmail smtp 发送邮件
    jquery动画总结
  • 原文地址:https://www.cnblogs.com/zhaogaojian/p/10696090.html
Copyright © 2011-2022 走看看