{"id":2117,"date":"2025-04-08T22:00:12","date_gmt":"2025-04-08T19:00:12","guid":{"rendered":"https:\/\/jasonblackeye.com\/?p=2117"},"modified":"2026-02-19T19:33:46","modified_gmt":"2026-02-19T17:33:46","slug":"next-bricks-how-to-stop-lenis-smooth-scroll-on-certain-bricks-sections","status":"publish","type":"post","link":"https:\/\/jasonblackeye.com\/el\/next-bricks-how-to-stop-lenis-smooth-scroll-on-certain-bricks-sections\/","title":{"rendered":"Next Bricks: How to Stop Lenis Smooth Scroll on Certain Bricks Sections"},"content":{"rendered":"

When using the Lenis Smooth Scroll integration provided by Next Bricks<\/strong><\/a>, the smooth scrolling effect is applied globally across your entire website. While this works great in most cases, there might be certain areas\u2014like sections with overflow content or popups\u2014where you don\u2019t want Lenis to interfere with native scrolling.<\/p>\n\n\n\n

For example<\/strong>, 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.<\/p>\n\n\n\n

Here\u2019s how you can easily prevent Lenis from affecting specific elements:<\/p>\n\n\n\n

Step 1: Select the Element<\/h4>\n\n\n\n

In Bricks Builder, select the Section, Block, or Container where you want to disable Lenis smooth scrolling.<\/p>\n\n\n\n

Step 2: Go to the Style Tab<\/h4>\n\n\n\n

With the element selected, open the Style tab in the right-hand sidebar.<\/p>\n\n\n\n

Step 3: Add a Custom Attribute<\/h4>\n\n\n\n
<\/div>\n\n\n\n
\n
\n
\"lenis<\/figure>\n<\/div>\n\n\n\n
\n

Scroll down to the Attributes panel and add the following attribute:<\/p>\n\n\n\n

    \n
  • Name: data-lenis-prevent<\/li>\n\n\n\n
  • Value: (Leave it empty)<\/li>\n<\/ul>\n\n\n\n

    Save your changes and preview the page.<\/p>\n\n\n\n

    Now, Lenis will ignore this element, and native scroll behavior will be restored inside it.<\/p>\n<\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"

    Learn how to disable Lenis Smooth Scroll on specific sections or popups in Bricks Builder when using the Next Bricks plugin. A simple method to fix scroll issues with overflow content or modals.<\/p>","protected":false},"author":1,"featured_media":2322,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_seopress_robots_primary_cat":"none","_seopress_titles_title":"%%post_title%% %%sep%% %%sitetitle%%","_seopress_titles_desc":"%%post_excerpt%%","_seopress_robots_index":"","footnotes":""},"categories":[13],"tags":[],"class_list":["post-2117","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials"],"acf":[],"_links":{"self":[{"href":"https:\/\/jasonblackeye.com\/el\/wp-json\/wp\/v2\/posts\/2117","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jasonblackeye.com\/el\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jasonblackeye.com\/el\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jasonblackeye.com\/el\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jasonblackeye.com\/el\/wp-json\/wp\/v2\/comments?post=2117"}],"version-history":[{"count":0,"href":"https:\/\/jasonblackeye.com\/el\/wp-json\/wp\/v2\/posts\/2117\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/jasonblackeye.com\/el\/wp-json\/wp\/v2\/media\/2322"}],"wp:attachment":[{"href":"https:\/\/jasonblackeye.com\/el\/wp-json\/wp\/v2\/media?parent=2117"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jasonblackeye.com\/el\/wp-json\/wp\/v2\/categories?post=2117"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jasonblackeye.com\/el\/wp-json\/wp\/v2\/tags?post=2117"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}