Describe the bug
It seems when there is a horizontally-scrolling lenis instance as an ancestor of the default-config root-level lenis instance, scroll events conflict seem to conflict.
Vertical scroll behaves as expected, until mousing over the horizontally-scrolling instance - at which point all vertical scrolling stops and seems to be passed to the nested instance which does not scroll vertically. You are then unable to vertically scroll at all until you mouse out of the horizontal container, at which point you can resume normal page scroll.
data-lenis-prevent
attribute seems to not affect things.overscroll-behaviour
CSS rules tends to introduce a vertical flickering effect, which indicates that the browser is trying to scroll vertically as expected, but being blocked by LenisExpected behaviour
I would expect the nested-scroll behaviour to mimic the behaviour of native scroll - which can be demonstrated by commenting out all JS. Vertical overscroll from within a horizontally-scrolling element should chain back up to the root-level scroll container.
To Reproduce
A reproduction of this issue as a fork of the minimal setup codepen can be found here:
https://codepen.io/damnsamn/pen/WNPRMpV
I also have prepared a (still simple) reproduction which is more representative of the UX problem it poses in my particular case:
https://codepen.io/damnsamn/pen/dyaNdbz
Pay now to fund the work behind this issue.
Get updates on progress being made.
Maintainer is rewarded once the issue is completed.
You're funding impactful open source efforts
You want to contribute to this effort
You want to get funding like this too