AFUI2.2: After delete one item in the list, the last item of the list don't scroll to bottom

[lianghuiyuan]

Hi, I am using the AFUI2.2 to develop a hybid App. But now I have a problem: after delete one item in the list, the last item of the list don't scroll to bottom. I find that it may be the result of

el.css("top",this.el.scrollHeight+this.refreshHeight+1+"px");

in

    //af.scroller.js
        nativeScroller.prototype.updateP2rHackPosition=function(){
            if(!this.refresh)
                return $(this.el).find(".p2rhack").remove();
            var el=$(this.el).find(".p2rhack");
            if(el.length === 0){
                $(this.el).append("<div class='p2rhack' style='position:absolute;width:1px;height:1px;opacity:0;background:transparent;z-index:-1;-webkit-transform:translate3d(-1px,0,0);'></div>");
                el=$(this.el).find(".p2rhack");
            }
            el.css("top",this.el.scrollHeight+this.refreshHeight+1+"px");
        };

After delete one item in the list, the last item of the list don't scroll to bottom, and the value of "top" have not be changed. But if I modify the value of "top" to 0, the item of the list scroll to bottom.

follow is my code:

    scrollPanel($("#device"), "device");

    var scrollPanel = function(el, panel){
        var myScroller;
        myScroller = el.scroller({
            verticalScroll:true,  
            horizontalScroll:false,  
            autoEnable:true}); //Fetch the scroller from cache

        $.bind(myScroller, 'scrollend', function () {
            console.log("scrollend");
        });
        $.bind(myScroller, 'scrollstart', function () {
            $.molmc.alwaysHideMask = true;
            console.log("scrollstart");
        });
        $.bind(myScroller,"scroll",function(position){
            console.log("scroll");
        })
        $.bind(myScroller, "refresh-trigger", function () {
            console.log("refresh-trigger");
        });
        var hideClose;
        $.bind(myScroller, "refresh-release", function () {
            var that = this;
            if(panel == "device"){
                $.molmc.device.showDeviceList(true);
            }else if(panel == "graphic"){
                $.molmc.grapic.ShowRecipeList(true);
            }
            clearTimeout(hideClose);
            hideClose = setTimeout(function () {
                that.hideRefresh();
            }, 500);
            return false; //tells it to not auto-cancel the refresh
        });

        $.bind(myScroller, "refresh-cancel", function () {
            clearTimeout(hideClose);
        });
        myScroller.enable();
        myScroller.addPullToRefresh();
        myScroller.addInfinite();

        $.bind(myScroller, "infinite-scroll", function () { 
            var self = this; 
            console.log("infinite triggered"); 
            $.bind(myScroller, "infinite-scroll-end", function () { 
                $.unbind(myScroller, "infinite-scroll-end"); 
                self.scrollToBottom(); 
                setTimeout(function () { 
                    $(self.el).find("#infinite").remove(); 
                    self.clearInfinite(); 
                },300); 
            }); 
        }); 
    };

I think it's scrollHeight cause the problem, But I can't be sure.

[imaffett]

Can you post an example for me to debug? I need the contents of the HTML to replicate.

[lianghuiyuan]

I think this issue is the same problem with #687
and i still have not find the way to slove the problem.
I'm sorry I don't know how to build an example for you to debug. But the problem is just like follow pic:
the extra spacing appears at the bottom.

[lianghuiyuan]

Setting the .p2rhack to display: none works for me.
Is this the correct way to slove the problem?

[imaffett]

@lianghuiyuan if it works for you. The hack is needed when the content on the screen is smaller then what the viewport is. The overflow scroll will not trigger, so you can't do a pull 2 refresh. If your content is longer, then it should work.