I have a pagepiling question, combining that with nanoscroller

Question

I have this sample website, http://www.miguelonenterprises.com/horizontalScroll.html.

The problem that I have with this website is this: It's a pagepiling page. If I were to place the mouse inside the nanoscroller section, and scroll down, the page will scroll to the second page. What I want to do is when the mouse is inside the nanoscroller section, that it scrolls the nanoscroller section up and down without moving the pagepiling to the next page. If the mouse is outside the nanoscroller section, then it moves to the next pagepiling page.

Anyone have any ideas?

Answer 1

Use the normalScrollElements option. As detailed on the pagePiling.js docs:

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