2

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?

Michael Lopez
  • 79
  • 1
  • 8

2 Answers2

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

Alvaro
  • 40,778
  • 30
  • 164
  • 336
  • Ok so following that suggestion, I added normalScrollElements: '#section1' to the parameters. Now what happens is that I can scroll up and down the nanoscroller without moving to the next page, but if I move the mouse outside the nanoscroller and scroll down, the pages don't move at all. In fact, the only way that I can move the pages with that option enabled is by clicking the dots on the right, or by using the page up/page down keys. The scroll wheel outside the nanoscroller is practically useless. I've updated the sample website to reflect the changes. – Michael Lopez Nov 12 '20 at 15:01
  • It might be a bug in pagePilign.js then. I would suggest you to try to use [fullPage.js](https://alvarotrigo.com/fullPage/) instead, which is its big brother and it is maintained much more often. By using the [parallax extension](https://alvarotrigo.com/fullPage/extensions/parallax.html) with offset 100% you can get a pretty similar effect. – Alvaro Nov 13 '20 at 09:23
0

Ok I just looked at another entry. I changed the entry to normalScrollElements: '.main,' and that worked perfectly. Thanks for the idea, now I can proceed with this project.

Michael Lopez
  • 79
  • 1
  • 8
  • I see, then can you please accept my answers so others coming here know that my suggested solution was the right one? Thanks :) – Alvaro Nov 13 '20 at 09:24