Horizontal instance nested within vertical root instance - parent's vertical scroll not respected

[damnsamn]

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.

• Using the data-lenis-prevent attribute seems to not affect things.
• Using 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 Lenis

Expected 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

[MaxHiit]

Hi @damnsamn I'm currently trying to do the same. Have you solved your problem?

[damnsamn]

@MaxHiit no, I’ve just chalked nested opposing axis scroll containers as being unsupported. I just disabled it on the inner container and moved on.

[clementroche]

Hi @damnsamn, this is fixed in 1.1.14-dev.2, can you test?

Here is a fixed codepen.