You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
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
The text was updated successfully, but these errors were encountered:
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
The text was updated successfully, but these errors were encountered: