FullPage scrollOverflow section scrolled with iScroll scrollTo() bug

Question

I'm using FullPage with scrollOverflow: true and I need to scroll to a certain position in a scrollable section. FullPage uses forked version of iScroll plugin for those overflow sections.

So what I'm doing is:

• fire FullPage scroll to section
• find instance of iScroll in that section and fire it's scrollTo() event
• reBuild() FullPage

The scroll positions of both plugins change correctly, but the problem seems to be that FullPage doesn't register iScroll's scrollTo() event and behaves like the active section is scrolled to the top, so basically scrolling up gets you to previous section and scrolling down gets you under the content eventually.

document.querySelector('.button').addEventListener('click', e => {
  fullpage_api.moveTo(3)
  fullpage_api.getActiveSection().item.querySelector('.fp-scrollable').scrollTo(0, 1000, 1000)
  fullpage_api.reBuild()
})

Here is a simplified version of my code with the bug reproduced: https://jsfiddle.net/5bojtrmd/13/

after clicking the button, you can't get to the section 3 title anymore and you can scroll to red zone which shouldn't be seen

Answer 1

Few things:

• You need to use a negative value for the iscroll scrollTo y position.
• You won't have to call the refresh function of fullPage.js but the one from iScroll.

Code here:

document.querySelector('.button').addEventListener('click', e => {
    fullpage_api.moveTo(3)

    var instance = fullpage_api.getActiveSection().item.querySelector('.fp-scrollable').fp_iscrollInstance;
    instance.scrollTo(0, -1050, 1000);
     setTimeout(function () {
        instance.refresh();
    }, 1000 + 150);
});

Reproduction online .