Iscroll Empty Space

Question

I implemented iScroll successfully. But the problem is the screen scrolls even if there is no content.
Any suggests to solve this problem?
I am trying with that:

// enter code here
onScrollMove: function(e){
    var cont =$('.wrapper');
    alert($(cont).height());
    var docViewBottom = that.y + $(cont).height();
    if (docViewBottom<=0) {
        that.y=-($(cont).height())+30;
        that.startY = that.y;
        that.refresh();
        e.preventDefault();
    }
},

But the problem is every time the height is getting 426px. Is there any way to get the real height of the content?

score 0 · Answer 1 · answered May 03 '13 at 18:31

0

Try to disable bounce:

myScroll = new iScroll('wrapper', { 
    scrollbarClass: 'myScrollbar',
    bounce:false
});

answered May 03 '13 at 18:31

Ikrom

4,785
5
52
76

score 0 · Accepted Answer · answered May 06 '13 at 06:34

0

I have solved by setting the screen height on the Iscroll Height

answered May 06 '13 at 06:34

Jabeer

879
1
8
13

Charlly Chen · Answer 3 · 2016-04-30T07:27:33.170

it's a pretty trick to keep something at the bottom of ur html body. i used a blank to achieve this when to detect the bottom for pull-up-loadMore:

      <sapn id="bottomLine">&nbsp;</span>
      <table id="bottomRefreshImg" style="display:none">
        <tr><td><img src="refreshGreen.gif" /></td></tr>
        <tr><td>loading...</td></tr>
      </table>
    </div> //close scroller
  </div>  //close wrapper
  <div id="footer"></div>
  <script src="./jquery-2.2.3.min.js"></script>
  <script src="./iscroll.js"></script>
  <script src="./page.js"></script>
</body>

the first line is the blank, in css, it looks like:

 #bottomLine{
    height:1px; //it's ivisible
    font-size:1px;
}

and the corresponding js code in page.js:

var myScroll;
var myScroolHasCausedAddNew=0;

function loaded () {
    myScroll = new IScroll('#wrapper', {
                       scrollbars: true,
                       scrollbars: 'custom',
                       mouseWheel: true,
                       click:true,
                       interactiveScrollbars: true,
                       shrinkScrollbars: 'scale',
                       fadeScrollbars: true,
                       snap:true,
                       snap:'table',
    });
    myScroll.on('scrollStart',function(){
        if($("#bottomLine").position().top + myScroll.y-myScroll.wrapperHeight<11){
            if(myScroll.directionY==1){
                $("#bottomRefreshImg").show();
                myScroolHasCausedAddNew=1;
            }
        }       
        return false;
    });
    myScroll.on('scrollEnd',function(){
        if(myScroolHasCausedAddNew==1){
            myScroolHasCausedAddNew=0;
            $("#bottomRefreshImg").hide();
            loadMore();
        }
        return false;
    });

}

the answer for ur question is in the line "$("#bottomLine").position().top + myScroll.y-myScroll.wrapperHeight<11", where 11 is for tolerance, in fact, $("#bottomLine").position().top === myScroll.wrapperHeigh + Math.abs(myScroll.y).

Note that you don't really need to set so many iscroll propertites to have these code work, i just copy them from from my project. for more info about the iscroll properties, plz check the document of iscroll.

Hope this helps.

a little more for other readers on iscroll-refresh: Do not forget to update ur iscroll after new items loaded, this is explained in the iscroll document.

Iscroll Empty Space

3 Answers3