When using the Lenis Smooth Scroll integration provided by Next Bricks, the smooth scrolling effect is applied globally across your entire website. While this works great in most cases, there might be certain areas—like sections with overflow content or popups—where you don’t want Lenis to interfere with native scrolling.
For example, if you have a container with a fixed height (e.g., 500px) and internal content that overflows vertically, Lenis might block the internal scroll, making it impossible to scroll through the content. This issue can also appear inside modals or popups with scrollable content.
Here’s how you can easily prevent Lenis from affecting specific elements:
Step 1: Select the Element
In Bricks Builder, select the Section, Block, or Container where you want to disable Lenis smooth scrolling.
Step 2: Go to the Style Tab
With the element selected, open the Style tab in the right-hand sidebar.
Step 3: Add a Custom Attribute
Scroll down to the Attributes panel and add the following attribute:
- Name: data-lenis-prevent
- Value: (Leave it empty)
Save your changes and preview the page.
Now, Lenis will ignore this element, and native scroll behavior will be restored inside it.