I'm building out a site using fullpage.js, that also has an overlay that pops up and covers the entire page. Inside the overlay, is a div setup with overflow: scroll, so that you can see all of the content. The problem lies in that when you scroll thru the content of the overlay, the scrolling of fullpage.js is still going on the background slides, causing you to end up on a random slide when you close the overlay.

Is there any way to disable the scroll functionality for just the slides, without effecting the scrolling of my div set to overflow:scroll?

I'm building out a site using fullpage.js, that also has an overlay that pops up and covers the entire page. Inside the overlay, is a div setup with overflow: scroll, so that you can see all of the content. The problem lies in that when you scroll thru the content of the overlay, the scrolling of fullpage.js is still going on the background slides, causing you to end up on a random slide when you close the overlay.

Is there any way to disable the scroll functionality for just the slides, without effecting the scrolling of my div set to overflow:scroll?

• javascript
• jquery
• fullpage.js

1 Answer 1

Using the option normalScrollElements that fullpage.js plugin provides:

From the documentation:

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