[Bug] `normalScrollElements` that break autoscroll behaviour

[ortonomy]

Description

This feels like a breaking bug for me, so I don't know how others are dealing with this, so I'm not sure what I've doing wrong.

1. When a page doesn't include a normalScrollElements part, the fullpage scroll jacking works well and nicely scrolls between the pages

When a section include a normalScrollElements div, if I scroll too fast, or just scroll in the 'wrong way', or just scroll, the page itself still scrolls, as if fullpage has lost all control and as if scrolling a normal full length page. fullpage.js does nothing till this scroll stops, then seems to take back control and re-align the page.

I understand I'm specifying that I want a specific element to scroll normally, but I would expect the scroll events in the normal div to completely stop propogation and my swipes / mouse scroll to only be applied to that scrollable div. If I move outside the div to an element that isn't marked as normal scroll events, then fullpage should do its thing.

2. The problem is compounded on iOS where fullpage tries to keep the bottom of the safari chrome from disappearing on scroll (presumably by making the viewport container height: 100%; oveflow: hidden; and when it scrolls this way, the chrome disappears and the navigation starts bugging out.

3. I've considered using scrollOverflow: true instead, but it doesn't work for horizontal overflow and on mobile the behaviour is even worse. fullpage autoscrolls before you even know you're at the bottom of the scrollable div.

Basically, is there anyway to just prevent fullpage or whatever libs you're using underneath to ignore scroll events that started inside the normal scrollable div?

Link to isolated reproduction with no external CSS / JS

I'm using vue, so I used vue fullpage to be as close to a repro as possible: https://codesandbox.io/s/janky-fullpage-0uvei

Steps to reproduce it

1. Scroll to middle slide
2. scroll any of the scrollable divs up and down
3. autoscroll doesn't capture event, and page scrolls as if it's a normal page, after this, then fullpage seems to take over.

Versions

Chrome latest, macos. Safari latest, iOS 14

[ortonomy]

P.S - Please put in your own license key: I don't really want to give mine out to the public.

[alvarotrigo]

This could easily be solved when using scrollBar: false. With scrollbar the page behaves in the same way it would on a normal page, see this codepen: https://codepen.io/alvarotrigo/pen/MWyMLwN

I understand the issue here is that you would spect autoScroll instead of a free scroll. Which I guess makes sense too :)

So thanks for reporting it! I'll take a look at it for the next release! Marked as a bug!

[alvarotrigo]

Regarding the overflow of the scroll. Try to apply this and see if this fixes the issue:

.element {
  overscroll-behavior: contain;
}

Demo (green box) https://codepen.io/guivr/full/xxVpzRM

More info: https://getcssscan.com/blog/prevent-page-scrolling-while-scrolling-div-element