How to fix horizontal scroll on trackpad?

[runnickrun]

I have a website that has some sections with overflow-x:auto applied: Codepen

When you try scrolling with a trackpad horizontally it still moves the page vertically a bit — as you can't do a perfect horizontal swipe on the trackpad. So minimal vertical scroll is still present and lenis reads it.

Is there a way to somehow detect scroll direction and prevent vertical scroll if it's horizontal?

Or would be the best solution? Disable lenis on those sections?

Thanks in advance!

[clementroche]

Please follow this Troubleshooting guide before.

You also probably need to read Nested scroll tutorial

Your issue is valid tho, Lenis is missing a way to handle nested horizontal scroll.

[runnickrun]

@clementroche yeah, it looks like it is not a bug but a feature (as you still want vertical smooth scroll on those sections).

One solution might be to prevent vertical scroll, unless certain vertical/horizontal ratio is met, but not sure how ease to implement this.

[notorigine]

Your issue is valid tho, Lenis is missing a way to handle nested horizontal scroll.

Is there any way to mitigate the issue while a fix is implemented?

[clementroche]

overflow-x: 'clip' will completly fix it but i assume you need this overflow for a reason. gestureOrientation: 'both' will partially fix you issue