javascriptjqueryfullpage.jsiscroll

With Fullpage.js, can y-position inside sections be reported during scrollOverflow scrolling? (using iscroll-probe)


I'm using the latest version of fullpage.js with the scrollOverflow option set to true. Like this example... http://alvarotrigo.com/fullPage/examples/scrolling.html

Fullpage.js uses iscroll.js for this option, and I have included the "probe" version of iscroll. Like this example... http://lab.cubiq.org/iscroll5/demos/probe/

Can iscroll-probe report the y position of whichever fullpage "section" is currently being scrolled?


Solution

  • It is indeed possible. Although the iScroll library has some bugs that were solved for its use in fullpage.js with the scrolloverflow.js fork. I would suggest you to do those changes yourself in the iScroll Probe.

    Regarding how to get the scrolling possition, just take a look at the source example you provided to know which iscroll events to use.

    Then, just take the iscroll instance of the section that can be extracted with:

    $('.fp-section.active').find('.fp-scrollable').data('iscrollInstance');
    

    Or from the active slide:

    $('.fp-section.active').find('.fp-slide.active').find('.fp-scrollable').data('iscrollInstance');
    

    And use the iScroll option probeType:3 as detailed in their docs. To do so extend the default scrolloverflow options with the scrollOverflowOptions param.

    And mixing all together...

    Reproduction online

    $('#fullpage').fullpage({
        sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],
        scrollOverflow:true,
        scrollOverflowOptions: {
            probeType: 3
        },
        afterLoad: function(anchorLink, index){
           var iscroll = $('.fp-section.active').find('.fp-scrollable').data('iscrollInstance');
    
           if(iscroll && typeof iscroll !== undefined){
                iscroll.on('scroll', getScroll);
           }
        }
    });
    
    function getScroll(){
       console.log(this.y);
       $('#position').text(this.y);
    }