darkroomengineering / lenis

How smooth scroll should be
https://lenis.darkroom.engineering
MIT License
7.35k stars 315 forks source link

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

Open damnsamn opened 7 months ago

damnsamn commented 7 months ago

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.

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 commented 3 months ago

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

damnsamn commented 3 months ago

@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.