使用iscroll 底部被遮住（异步加载DOM造成的高度问题造成iScroll不能滚动）怎么解决

Question

<script>

$(document).ready(function () {
    App.Current = {
        Page: {
            PageAt: 1,
            PageCount: 3,
            reset: function () {
                this.PageAt = 1;
            }
        }
    };
    function initScroller() {
        var pullDown = document.querySelector("#PullDown"),
            pullUp = document.querySelector("#PullUp"),
            isPulled = false; // 拉动标记

        var myScroll = new IScroll('#wrapper', {
            probeType: 3,
            mouseWheel: true,
            scrollbars: true,
            preventDefault: false,
            fadeScrollbars: true
        });
        var direction = '';
        myScroll.on('scroll',
            function () {
                var height = this.y,
                    bottomHeight = this.maxScrollY - height;
                // 控制下拉显示
                if (height >= 60) {
                    pullDown.style.display = "block";
                    isPulled = true;
                    return;
                } else if (height < 60 && height >= 0) {
                    direction = 'up';
                    pullDown.style.display = "none";
                    return;
                }

                // 控制上拉显示
                if (bottomHeight >= 60) {
                    pullUp.style.display = "block";
                    isPulled = true;
                    return;
                } else if (bottomHeight < 60 && bottomHeight >= 0) {
                    direction = 'down';
                    pullUp.style.display = "none";
                    return;
                }
            });

        myScroll.on('scrollEnd', function () { // 滚动结束
            if (isPulled) { // 如果达到触发条件，则执行加载
                isPulled = false;
                if (direction === 'up') {
                    //下拉刷新
                    loadList( 0, direction);
                }
                else {
                    //加载更多
                    loadList((App.Current.Page.PageAt) * App.Current.Page.PageCount, direction);
                }
                myScroll.refresh();
            }
        });
        window.myScroll = myScroll;
    }
    initScroller();

    function loadList( skipCount, direction) {
        $.ajax({
            type: "Post",
            url: App.ApiAddress.GetComments,
            data: JSON.stringify({
                skipCount: skipCount,
                maxResultCount: App.Current.Page.PageCount,
                userId:null,
                activityId:null,
                venueId:null
            }),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (response) {
                if (response.success && response.result) {
                    var items = response.result.items;
                    if (items && items.length > 0) {
                        var html = '';
                        var template = $('#listItem').html();
                        for (var i = 0; i < items.length; i++) {
                            var images=(function(){
                                var html='';
                                if(items[i].images&&items[i].images.length>0){
                                    for(var j=0;j<items[i].images.length;j++){
                                        html+=' <li class="pull-left"> <img src="/'+items[i].images[j].imageUrl+'" alt="" style="width: 89px;height: 59px"/> </li>';
                                    }
                                }
                                return html;
                            })();
                            html += template
                                .replace(/{{creationTime}}/g, moment(items[i].creationTime).format('YYYY-MM-DD HH:mm'))
                                .replace(/{{content}}/g, items[i].content)
                                .replace(/{{activity.coverUrl}}/g, items[i].activityArticle.coverUrl)
                                .replace(/{{activity.name}}/g, items[i].activityArticle.name)
                                .replace(/{{activity.place}}/g, items[i].activityArticle.place)
                                .replace(/{{images}}/g, images)

                        }
                        if (direction === 'up') {
                            $('#index_list').empty().append(html).fadeIn(500);
                            App.Current.Page.reset();
                        }
                        else {
                            $('#index_list').append(html);
                            App.Current.Page.PageAt++;
                        }
                        $('#index_list').fadeIn(500);
                        lazyLoadImage();
                        window.myScroll.refresh();
                    }
                    else {
                        if (direction === 'up')
                            $('#index_list').fadeOut(500).empty();
                    }
                }
                else {
                    if (direction === 'up')
                        $('#index_list').fadeOut(500).empty();
                }
            },
            error: function (msg) {

            }
        });
    }

    loadList(0,'up');
    function lazyLoadImage() {
        Echo.init({
            offset: 0,
            throttle: 50  //延迟时间
        });
    }

    lazyLoadImage();
});

</script>

Answer 1

直接参考官方Demo里无限加载的写法吧。