Guide
- How-to
- Scroll
Guide
- How-to
- Scroll
Guide
- How-to
- Scroll
How to Block Site Scroll When Full Height Navigation is Opened in Framer
Ever opened a full-screen nav and still been able to scroll the page behind it? Yeah, it’s not a great look. This blog shows you how to fix that with a tiny, invisible Framer component that cleanly disables scrolling when your menu is open. It’s simple to set up, totally seamless, and instantly levels up your user experience. No more accidental scrolling. Just smooth, intentional navigation.
Posted by
Nandi
Table of contents
The problem
Let’s say you’re previewing your site in Framer. You open your full-height nav, maybe it slides down from the top and covers everything with a semi-transparent background. But if you scroll with your touchpad or mouse, the content under the menu still moves.
That means someone could be halfway through your site before they even close the nav. Not ideal.
The fix: A simple “stop scroll” component
To solve this, we’ll use a tiny component called Stop Scroll. It’s basically invisible, doesn’t take up any space, and it blocks scroll when it’s active.
The problem
Let’s say you’re previewing your site in Framer. You open your full-height nav, maybe it slides down from the top and covers everything with a semi-transparent background. But if you scroll with your touchpad or mouse, the content under the menu still moves.
That means someone could be halfway through your site before they even close the nav. Not ideal.
The fix: A simple “stop scroll” component
To solve this, we’ll use a tiny component called Stop Scroll. It’s basically invisible, doesn’t take up any space, and it blocks scroll when it’s active.
The problem
Let’s say you’re previewing your site in Framer. You open your full-height nav, maybe it slides down from the top and covers everything with a semi-transparent background. But if you scroll with your touchpad or mouse, the content under the menu still moves.
That means someone could be halfway through your site before they even close the nav. Not ideal.
The fix: A simple “stop scroll” component
To solve this, we’ll use a tiny component called Stop Scroll. It’s basically invisible, doesn’t take up any space, and it blocks scroll when it’s active.
No scroll once menu is opened.
No scroll once menu is opened.
No scroll once menu is opened.
Here’s how to set it up:
Drop in the component
Drag and drop the Stop Scroll component into your canvas. It may appear as a tiny dot, that’s fine. You can set its positioning to absolute and opacity to zero, since it’s not a visual element.
Set it to “block scroll”
With the component selected, check the right panel. You’ll see a toggle called Block Scroll. Set it to Yes, and when you preview the site, scrolling is now disabled.
Set it to No, and scrolling works again.
Here’s how to set it up:
Drop in the component
Drag and drop the Stop Scroll component into your canvas. It may appear as a tiny dot, that’s fine. You can set its positioning to absolute and opacity to zero, since it’s not a visual element.
Set it to “block scroll”
With the component selected, check the right panel. You’ll see a toggle called Block Scroll. Set it to Yes, and when you preview the site, scrolling is now disabled.
Set it to No, and scrolling works again.
Here’s how to set it up:
Drop in the component
Drag and drop the Stop Scroll component into your canvas. It may appear as a tiny dot, that’s fine. You can set its positioning to absolute and opacity to zero, since it’s not a visual element.
Set it to “block scroll”
With the component selected, check the right panel. You’ll see a toggle called Block Scroll. Set it to Yes, and when you preview the site, scrolling is now disabled.
Set it to No, and scrolling works again.
Scroll stop component in the navigation, with "Block Scroll" set to "no".
Scroll stop component in the navigation, with "Block Scroll" set to "no".
Scroll stop component in the navigation, with "Block Scroll" set to "no".
Applying it to your navigation
Now let’s make this dynamic so it only blocks scroll when the navigation is open.
Assuming your navigation is built using component variants (e.g. Mobile Closed and Mobile Open), here’s what you do:
Step-by-step:
Paste the Stop Scroll component inside your navigation component’s primary variant.
In the desktop variant, set Block Scroll to No.
In the Mobile Open variant, set Block Scroll to Yes.
And that’s it. Now, when the menu opens, scrolling is disabled. When the menu closes, scrolling is back.
Applying it to your navigation
Now let’s make this dynamic so it only blocks scroll when the navigation is open.
Assuming your navigation is built using component variants (e.g. Mobile Closed and Mobile Open), here’s what you do:
Step-by-step:
Paste the Stop Scroll component inside your navigation component’s primary variant.
In the desktop variant, set Block Scroll to No.
In the Mobile Open variant, set Block Scroll to Yes.
And that’s it. Now, when the menu opens, scrolling is disabled. When the menu closes, scrolling is back.
Applying it to your navigation
Now let’s make this dynamic so it only blocks scroll when the navigation is open.
Assuming your navigation is built using component variants (e.g. Mobile Closed and Mobile Open), here’s what you do:
Step-by-step:
Paste the Stop Scroll component inside your navigation component’s primary variant.
In the desktop variant, set Block Scroll to No.
In the Mobile Open variant, set Block Scroll to Yes.
And that’s it. Now, when the menu opens, scrolling is disabled. When the menu closes, scrolling is back.
The "Block Scroll" property is changed to "yes" on the "Mobile Open" vairant.
The "Block Scroll" property is changed to "yes" on the "Mobile Open" vairant.
The "Block Scroll" property is changed to "yes" on the "Mobile Open" vairant.
Preview it in action
Try opening your menu now. You’ll notice: no background scrolling while it’s open. Close the menu? Scroll is back. It’s a small detail, but it makes your site feel way more polished and intentional.
Preview it in action
Try opening your menu now. You’ll notice: no background scrolling while it’s open. Close the menu? Scroll is back. It’s a small detail, but it makes your site feel way more polished and intentional.
Preview it in action
Try opening your menu now. You’ll notice: no background scrolling while it’s open. Close the menu? Scroll is back. It’s a small detail, but it makes your site feel way more polished and intentional.
