1

I'm using iScroll 5 with fullpage.js because the solution provided by fullpage.js is not what I need.

My page has 3 full page sections. The 2nd section has a vertical scrollable content.

What I need to do is to detect when my scrollable content is in the boundaries of the parent element(top and bottom), then if I perform again the scroll(both, mousewheel or touch), it fires an event.

Here's a Fiddle with the problem.

I need something like this:

$('.scrollwrapper').on("mousewheel touchmove", function() {
    if ("scroll is on max top"){
        $(this).on("wheelUp touchmoveUp", function() {
            $.fn.fullpage.moveSectionUp();
        });
    }else if ("scroll is on max bottom"){
        $(this).on("wheelDown touchmoveDown", function() {
            $.fn.fullpage.moveSectionDown();
        });
    }
});

Hope you can help me, I'll appreciate any help.

Strobel
  • 167
  • 1
  • 9
  • Your problem is not clear at all. Could you tell us which is the problem you are having? Also, why aren't you using the option `scrollOverflow` which creates the scrolling bar? – Alvaro Apr 02 '14 at 13:23
  • I'm not using the option `scrollOverflow` because it triggers a function to start another 3rd party plugin, called slimScroll, and this one doesn't fit my needs. What I need and don't know how do, is to detect when user reaches maximum and minimum scroll of the iScroll5 element, and then fire another function if the user scroll again in the same direction, the logic is the same I wrote above in that piece of code. – Strobel Apr 02 '14 at 14:17
  • You would need to look into the iScroll documentation to find out if they have any callback for it. – Alvaro Apr 02 '14 at 14:51
  • They don't, but I've seen some iScroll4 implementations of that callback function, unfortunately all don't work on iScroll5. – Strobel Apr 02 '14 at 15:00

1 Answers1

0

You can try something like this

xpScroll.on('scrollEnd', function(){
    var scrollY = xpScroll.y + 15;
    var scrollH = $('.xp-scroll').height() - $(window).height();
    var scrollEnd = scrollH + scrollY;

    if (scrollEnd == 0) {
        alert('End');
    }
});

http://jsfiddle.net/fF4BJ/1/ Worked for me in your fiddle. For scrolling up use your math-skills.

Marconi
  • 188
  • 5