Stop fullpage.js scroll when lightbox is open then re-enable when lightbox is closed

Question

So I'm using fullpage.js for a website I'm working on. I have a section that contains bio's of team leaders that open in a lightbox using Nivo lightbox. When you click on the person, their lightbox opens but if you scroll through their info (happens in mobile), the section slides.

I found this function from fullpage.js

$.fn.fullpage.setAllowScrolling(false);
$.fn.fullpage.setKeyboardScrolling(false);

Is there an event I can test when Nivo Lightbox opens/closes to call this function?

Example here: http://jeffreyroche.us/solarTestBed/#team/2 Click on someone then scroll up.

Answer 1

You should be using the option normalScrollElements of fullpage.js plugin:

normalScrollElements: (default null) If you want to avoid the auto scroll when scrolling over some elements, this is the option you need to use. (useful for maps, scrolling divs etc.) It requires a string with the jQuery selectors for those elements. (For example: normalScrollElements: '#element1, .element2')

And you might need to modify the value of normalScrollElementsTouchThreshold depending on your lightbox markup:

normalScrollElementTouchThreshold : (default 5) Defines the threshold for the number of hops up the html node tree Fullpage will test to see if normalScrollElements is a match to allow scrolling functionality on divs on a touch device. (For example: normalScrollElementTouchThreshold: 3)

You have all the info you need at fullpage documentation.

If you need more control you can always use the fullpage.js method setAllowScrolling to allow the autoScrolling or disable it. This way you can disable it when opening a popup, for example, and enable it again once you close it.