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 /

Here is my code :

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

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

});

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/cQ75J/13/

Here is my code :

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

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

});

• javascript
• jquery
• iscroll

3 Answers 3

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

You can do it without using any third party library, as follows :

var closeToBottom = ($(window).scrollTop() + $(window).height() > $(document).height()-550);
    if (closeToBottom) {
              //Do your stuff here
    }

You can change the position by modifying the number"550" which I has specified as default

Why do you use this library?

I prefer this one: http://manos.malihu.gr/jquery-custom-content-scroller/

But If it is a requirement, you must use the version 5. Because the version 4 doesn't have the events.

If you can use the versione 5 at the end of this page https://github./cubiq/iscroll you can see how to configure the event. For example:

myScroll = new IScroll('#wrapper');
myScroll.on('scrollEnd', doSomething);