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

jquery events lightbox nivo-slider fullpage.js
Jeffrey Roche picture Jeffrey Roche · Jul 17, 2014 · Viewed 8.4k times · Source

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

Alvaro picture Alvaro · Jul 18, 2014

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.

Related questions

Event binding on dynamically created elements?

I have a bit of code where I am looping through all the select boxes on a page and binding a .hover event to them to do a bit of twiddling with their width on mouse on/off. This happens …

Read More
jQuery Event Keypress: Which key was pressed?

With jQuery, how do I find out which key was pressed when I bind to the keypress event? $('#searchbox input').bind('keypress', function(e) {}); I want to trigger a submit when ENTER is pressed. [Update] Even though I found …

Read More
jQuery multiple events to trigger the same function

Is there a way to have keyup, keypress, blur, and change events call the same function in one line or do I have to do them separately? The problem I have is that I need to validate some data with …

Read More