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?

回答1:

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);
}

回答2:

I believe it is impossible, because both plugins will try to work with the same 'element', at the same time, and in ways different. So, it'll conflict each others, of course. I'm sorry, but try another way. :/

来源：https://stackoverflow.com/questions/39359639/with-fullpage-js-can-y-position-inside-sections-be-reported-during-scrolloverfl

标签

javascript

jquery

fullpage.js

iscroll