search

darkroomengineering / lenis

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

Handling iframes #398

Closed azkalex closed 3 weeks ago

azkalex commented 1 month ago

Hello, why use the lenis-smooth here, because this makes the iframes unusable,

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

Instead of having that on lenis-scrolling, so they are not interactive while scrolling (as they should, to not encounter scrolling issues), but have them interactive when scrolling stops?

.lenis.lenis-scrolling iframe {
  pointer-events: none;
}

Is there any specific reason you're not recommending the suggested CSS over the current one?

clementroche commented 1 month ago

Can you share a minimal reproduction link using codepen please? Which version of lenis are you using?

Check this codepen: https://codepen.io/ClementRoche/pen/VwxgZEP

azkalex commented 3 weeks ago

I found the issue. In the codepen, you're using "https://unpkg.com/lenis@1/dist/lenis.min.js". With this, when the scrolling stops, both lenis-scrolling and lenis-smooth classes get removed when the scrolling stops, so in this case, the recommended CSS is correct.

In my website, I was using "https://cdn.jsdelivr.net/gh/studio-freight/lenis@latest/bundled/lenis.js", and with this, the lenis-smooth doesn't get removed along with lenis-scrolling, it stays even after the scrolling stops, and that's why I had to make the change from my original comment.

Also, I just saw that on jsdelivr, you have the recommendation I suggested, but here on github you still kept lenis-smooth for. For consistency, I think it makes more sense to just have it like this everywhere:

.lenis.lenis-scrolling iframe {
  pointer-events: none;
}

Unless, as I said, you have a specific reason for keeping pointer events none on lenis-smooth.

clementroche commented 3 weeks ago

Scrolling over iframe is an issue when you're using smoothWheel: true and scroll is animated, which correspond to .lenis.lenis-smooth. While .lenis.lenis-scrolling correspond to any scroll event the "native" ones.

To sum up, this snippet is correct.

.lenis.lenis-smooth iframe{
 pointer-events:none
}

Your issue is fixed, you just had to update the lenis version and read the documentation so I'm closing it.