3

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("--")

});
Sulthan Allaudeen
  • 11,330
  • 12
  • 48
  • 63

3 Answers3

7

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

Community
  • 1
  • 1
Jean-Paul
  • 19,910
  • 9
  • 62
  • 88
  • I need that exact function to iScroll5! Please how can I write that detecting(bottom and top) functions with it? ;O – Strobel Apr 02 '14 at 15:09
  • No, your demo is for iScroll4. – Strobel Apr 02 '14 at 17:09
  • @Strobel: And you can't make the modification yourself? – Jean-Paul Apr 02 '14 at 17:41
  • I'm close, the problem is the functions are firing multiple times when I reach top or bottom using the mousewheel of the apple magic mouse or trackpad. – Strobel Apr 02 '14 at 18:06
  • This is exactly what I did. I even tryed your demo on fiddle and it's not working with the mousewheel yet. :( – Strobel Apr 02 '14 at 18:30
  • Read this: https://github.com/cubiq/iscroll/issues/397 and check my new demo 2, maybe it works because of continuously fired events. – Jean-Paul Apr 02 '14 at 18:35
  • The same on demo 2, events still firing repeatedly during the inertia. I think it's an issue with iScroll5. If there's a way to stop it after fire the first time. Do you have a magic mouse or trackpad? If you check on the console log you will understand better I guess. – Strobel Apr 02 '14 at 18:51
  • 2
    Thank you very much for trying. I'm digging here even deeper and I found out it's not a simple issue as I thought. I'll keep trying and if I come up with the solution I'll tell you. – Strobel Apr 02 '14 at 20:00
  • I can't accept because the original question isn't mine. But I upvoted your answer. – Strobel Apr 02 '14 at 21:01
  • @Strobel: Oh haha, I thought you were the original poster ;) – Jean-Paul Apr 02 '14 at 21:04
  • @Strobel did you ever find an answer to this problem? I'd love to know as I have it too. Thanks! – Kragalon Apr 26 '16 at 00:05
0

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.com/cubiq/iscroll you can see how to configure the event. For example:

myScroll = new IScroll('#wrapper');
myScroll.on('scrollEnd', doSomething);
Nico
  • 156
  • 4
  • how can i use this library? –  Mar 20 '14 at 11:31
  • I just created a new version of your fiddler with the correct script, but this iScroll is not a good library, it is full of bugs. Here the url http://jsfiddle.net/cQ75J/16/ – Nico Mar 20 '14 at 12:11
0

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

Hamid Narikkoden
  • 851
  • 5
  • 12
  • You need to use a library like iScroll to make parts of a page i.e. div containers scrolling on iPad and maybe other tablets. iScroll uses hardware accerated transformations (CSS3) to move the div layer, so the normal scrolling properties like scrollTop are not available. – Klaus Heyne Jul 14 '14 at 10:41