Fix: Lenis Not Working Inside Popup or Modal
Resolve Lenis smooth scroll issues inside popups or modals by using the data-lenis-prevent attribute. A practical guide with explanation and code snippet.
Fix: Lenis Not Working Inside Popup or Modal
When using Lenis for smooth scrolling in modern web projects, you may find that scrolling inside a popup or modal window doesn’t behave correctly. The content might feel locked or fail to scroll smoothly.
The issue happens because Lenis takes over scroll behavior globally, which interferes with nested scrollable areas like modals.
✅ Solution: Add the data-lenis-prevent attribute to the container that should be excluded from Lenis control. This allows the modal to handle its own scrolling.
<div class="popup" data-lenis-prevent>
<p>This is popup content that scrolls normally.</p>
</div>