how to get event scroll to bottom using iscroll library?

Question

Need to get an event when user scroll to bottom using iscroll library ?

I need a alert when user scroll to top and bottom. How can i do this ?

Here is my fiddle http://jsfiddle.net/cQ75J/13/

Here is my code :

var myScroll;
function loaded() {
    myScroll = new iScroll('wrapper');
}

$(document).ready(function(){
    loaded();
  //  alert("--")

});

Answer 1

Just add another option to the iScroll options like so:

var myScroll = new iScroll('wrapper', {
    bounce: true,
    onScrollEnd: function(e) {
        if (this.y == this.minScrollY)
            alert('This is the beginning');
        if (this.y == this.maxScrollY)
            alert('This is the end');
    } 
});

I've used the onScrollEnd event here but you can choose from multiple like these.

You can find the working jsFiddle HERE.

Update

DEMO

To show you exactly what is possible, you could do for example the following:

HTML

<div id="begin"><b>The START</b></div>
<div id="end"><b>The END</b></div>

CSS

#begin {     
    height:80px;
    padding: 3px;
    position:absolute;
    top:150px;
}

#end {     
    height:80px;
    padding: 3px;
    position:absolute;
    top:150px;
    display:none; 
}

JavaScript

function loaded() {  
    var myScroll = new iScroll('wrapper', {
        bounce: true,
        onScrollEnd: function(e) {
            if (this.y == this.minScrollY)
                $("#begin").show();
            if (this.y < this.minScrollY)
                $("#begin").hide();
            if (this.y == this.maxScrollY)
                $("#end").show();
            if (this.y > this.maxScrollY)
                $("#end").hide();
        } 
    });
}

$(document).ready(function(){
    loaded();    
});

Where you make a div appear at the beginning and the end.

You can find a demo of this implementation HERE

Update: iScroll5

For iScroll 5 you do the following:

var myScroll;

function loaded () {
    myScroll = new IScroll('#wrapper', { 
        scrollbars: true, 
        interactiveScrollbars: true,
        mouseWheel: true,
        fadeScrollbars: false 
    });
    myScroll.on('scrollEnd', function() {
            if (this.y == 0)
                $("#begin").show();
            if (this.y < 0)
                $("#begin").hide();
            if (this.y == this.maxScrollY)
                $("#end").show();
            if (this.y > this.maxScrollY)
                $("#end").hide();
        });
}

loaded();

and you also make sure you adhere to the new syntax and CSS specifications.

You can find some of these HERE.

DEMO

or you can define a margin (maybe this works for magic mouse)

DEMO 2