jquery.fullPage.js how to enable scroll within a div without affecting the sections scroll

javascript jquery css collapsable fullpage.js
Gonzalo Fernandez picture Gonzalo Fernandez · Mar 13, 2014 · Viewed 27.8k times · Source

Right, this is not easy to explain... I'm using jquery.fullPage.js for a website. I have a few collapsable panel hosting a big amount of copy which requires scroll. My problem begins when I enable the scroll on this panel because it sends me to the next section. Is there any way for me to scroll within this panel without affecting the full page scroll?

Thanks guys

Answer

Alvaro picture Alvaro · Apr 3, 2014

Yeah, fullpage.js plugin offers an option called normalScrollElements. As detailed in the documentation:

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')

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

jQuery table row expand/collapse

I've got a table and it has rows that are collapsible when clicked on the table heading. Problem is it doesn't seem to be very smooth, there's a lag and jump once I click on the header and when the …

Read More
How do I add a class to a given element?

I have an element that already has a class: <div class="someclass"> <img ... id="image1" name="image1" /> </div> Now I want to create a JavaScript function that will add a class to the div (…

Read More
How can I remove a style added with .css() function?

I'm changing CSS with jQuery and I wish to remove the styling I'm adding based on the input value: if(color != '000000') $("body").css("background-color", color); else // remove style ? How can I do this? Note that the line above …

Read More