Huge delay before scroll

[m4kman]

Hey,

This is my first time using Lenis, and I'm stumbling upon a very annoying issue.

I'm trying to add Lenis to a Next.js project, I've referenced the official documentation as well as other online guides on implementing this, but something seems to be off.

Whenever I scroll after adding Lenis, the page only scrolls after a delay of 2-3 seconds. If I keep scrolling, the page won't scroll at all until I let go of my scroll wheel.

I'm not changing any defaults, so this cannot be caused by my own configuration. Any ideas on what could be causing this?

Cheers.

[feledori]

Can you provide a reproduction?

[m4kman]

Thanks for getting back.

Sorry for the delay, but I managed to resolve the issue.

As I was creating a reproduction, I realized I had a scroll-smooth class on the html tag in my layout.tsx file. This added a scroll-behavior CSS property. I believe trying to add Lenis scroll on top of the native smooth scroll led to a conflict, which resulted in the above weird behavior. Removing the class fixed the issue.

This has been a learning opportunity, to say the least.

[feledori]

there is recommended css to add, in the readme. its a bit further down, maybe I'll bump it up a little or link it. happy you figured it out!

[hamidurrk]

Thanks for getting back.

Sorry for the delay, but I managed to resolve the issue.

As I was creating a reproduction, I realized I had a scroll-smooth class on the html tag in my layout.tsx file. This added a scroll-behavior CSS property. I believe trying to add Lenis scroll on top of the native smooth scroll led to a conflict, which resulted in the above weird behavior. Removing the class fixed the issue.

This has been a learning opportunity, to say the least.

You saved the day man. Cheers!