Added iscroll-probe files

[vekvoid]

Added iscroll-probe.js and iscroll-probe.min.js to use probeType option and onScroll event.

[alvarotrigo]

Thanks for it! Just a little problem with it:

As detailed in the dos:

when using scrollOverflow:true fullpage.js will make use of a forked and modified version of iScroll.js libary.

There's a reason why the file scrolloverflow.js is not called iscroll.js and its because it is not exactly the same but a fork of it which solved some known bugs in iScroll.js.

In order to add the probe version those bugs would have to get solved in that versions too.

[vekvoid]

Thanks for the advice.

I just fix that bug like in the issue you linked here and I tested on IE 11.

If all it's ok, maybe we should change the name of the files to "scrolloverflow-probe".

[vekvoid]

Sorry, I deleted the files on the previous commit c42d380. In 15c3006 i added the fixed files.

[alvarotrigo]

Thanks for that I'll review it at some point.

[squalvj]

i still cannot track the offset.
this is the order i import my js

• iscroll-probe.js
• scrolloverflow.js
• fullpage.js

did i miss something ?

[alvarotrigo]

@squalvj check my answer here.

[andrespr]

For those looking at this in 2018, scrolloverflow.js seems to have moved forward and probe was never merged from these old open pull requests trying to get probe into scrolloverflow.js. You basically have to redo the merge yourself with the latest scrolloverflow.js. In my experience just now, these pull request modified files will not work with the latest fullpage.js. You can diff one of these modified for probe iscroll-probe.js or scrolloverflow.js pull request versions with the scrolloverflow.js version of that time or just search for probeType for the new code you'll have to copy and paste into the current scrolloverflow.js. The final filename must be scrolloverflow.min.js for it to work with the current fullpage.js. Then for usage, @alvarotrigo posted his example which is still relevant. Here are what the changes currently look like:

[BenWass]

Hi,

(DISCLAIMER: I am a fairly competent programmer who is just getting started with web design)

I was just wondering as to the current status of this feature?

I am currently using the latest build of fullpage.js, I have read through the example given by @alvarotrigo and for the most part copied the example. I have also manually merged the missing code as detailed by @andrespr.

However, it dose not seem to pickup the 'scroll' action. I'm not sure if this is because it is not being fired correctly or its not being picked up. I changed the 'scroll' to 'scrollStart' and it worked correctly.

I have included a copy of my current settings in the page here.

I would very much appreciate any advice or help.

[alvarotrigo]

I was just wondering as to the current status of this feature?

I haven't reviewed it yet.

[BenWass]

I haven't reviewed it yet.

Thank you for the quick reply, is there anything that you could point me towards in the mean time. I'm coming up short for guidance.

[alvarotrigo]

My answer here:
#2531 (comment)

[niC00L]

Hi, I'm trying to reproduce this, but variable iscroll is undefined. Is there some kind of new approach to this in the newest version of fullpage?

[alvarotrigo]

@niC00L some things have changes, such as

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

//new way probably would be
$('.fp-section.active').find('.fp-slide.active').find('.fp-scrollable')[0].fp_iscrollInstance;

Also, if you use the old callback, make sure to use the fullpage.js option v2compatible:true.

[niC00L]

@alvarotrigo Thank you for a quick reply. I am able to get iscroll instance now, but the scroll event doesn't work. Other events work fine. Any suggestions? Did I forgot something?

[alvarotrigo]

I am able to get iscroll instance now, but the scroll event doesn't work. Other events work fine. Any suggestions? Did I forgot something?

As you can read on the stackoverflow answer, you'll need to use the probe version of iScroll and modify it a bit to fix a few bugs I fixed when forking it.

[alvarotrigo]

Or, you can try to use the file provided by @vekvoid, which apparently got those fixed:
https://github.com/vekvoid/fullPage.js/blob/15c3006bcedd633aac3e76b5ce5058f06caba704/vendors/iscroll-probe.js

[AmanSahota]

Hi Guys,

I have just tried doing this.

I added iscroll-probe.js from this link here:
https://github.com/vekvoid/fullPage.js/blob/15c3006bcedd633aac3e76b5ce5058f06caba704/vendors/iscroll-probe.js

This has been added before my scrolloverflow.min.js

I have added on the code as follows:

$(document).ready(function() { $('#fullpage').fullpage({ anchors: ['firstSection', 'personaSection', 'footer'], sectionsColor: ['red', 'grey', 'blue'], scrollOverflow: true, autoScrolling: true, scrollOverflowOptions: { probeType: 3 }, afterLoad: function(anchorLink, index){ var iscroll = $('.fp-section.active').find('.fp-slide.active').find('.fp-scrollable')[0].fp_iscrollInstance; if(iscroll && typeof iscroll !== undefined){ iscroll.on('scroll', getScroll); } } }); function getScroll(){ console.log(this.y); $('#position').text(this.y); } });

I do not seem to be getting any response in the console or the #position div

Here is my codepen: https://codepen.io/AmanSahota/pen/MqpJzx

Can anyone help?

[ronjb04]

Anybody has got this to work? codepen or anywhere? i'm facing the same issue. im able to get the fp_iscrollInstance data however the on scroll call back doesn't triggers. BTW I'm using the latest version 3.0.3.

[johanvdr]

@alvarotrigo I tried the iscroll-probe.js from the library and https://github.com/vekvoid/fullPage.js/blob/15c3006bcedd633aac3e76b5ce5058f06caba704/vendors/iscroll-probe.js

I've added the scrolloverflowoptions (probeType 3) and the v2 compatibility.

I'm getting the iscrollinstance. using:
$('.fp-section.active').find('.fp-scrollable')[0].fp_iscrollInstance;

But the scroll event won't fire.

console.log(iscroll); //returns instance
if(iscroll && typeof iscroll !== undefined){
console.log(true) // returns true
iscroll.on('scroll', getScroll);
}

	function getScroll(){
		console.log(this.y);
		console.log('scrolling'); // not outputting anything
			
	}

Any ideas on how to fix this?

[cwildfoerster]

I got a pretty hacky solution for my specific problem, below is some of my code which sould demonstrate it. In order to make it work you need to first set the following options:

scrollOverflow: true,
scrollOverflowOptions: {
  probeType: 3,
  useTransition: false,
}

As per the original iScroll doc, it should work only with transitions disabled, but i couldn't get the _animate method to fire. After a little bit of code digging, i found out that the _translate method is used instead, so i just inserted the following code from the probe _animate into scrolloverflow.js:

_translate: function (x, y) {
    if ( this.options.useTransform ) {

/* REPLACE START: _translate */

        this.scrollerStyle[utils.style.transform] = 'translate(' + x + 'px,' + y + 'px)' + this.translateZ;

/* REPLACE END: _translate */

    } else {
        x = Math.round(x);
        y = Math.round(y);
        this.scrollerStyle.left = x + 'px';
        this.scrollerStyle.top = y + 'px';
    }

    this.x = x;
    this.y = y;

    /* START ADDED */
    if ( this.options.probeType == 3 ) {
        this._execEvent('scroll');
    }
    /* END ADDED */


if ( this.indicators ) {
    for ( var i = this.indicators.length; i--; ) {
        this.indicators[i].updatePosition();
    }
}

window.fp_scrolloverflow.iscrollHandler.iScrollInstances[0].on('scroll', function () {
  $('.header').css({
    'top' : -this.y
  });
});

You may need to work on timing, i still need to find the correct event when to add the scroll event, because the onAfterLoad seem to fire to early when iscroll is not yet initialized. Also if you have a number of scrollables, you may need to find the right one in the array iScrollInstances.

[alvarotrigo]

Thanks for the info @cwildfoerster ! 👍