AttRibutes
Disable Scrolling
What is this page about?

Attributes, by Finsweet, offers a free series of Solutions that provide essential features to improve your Webflow websites.

Disable Scrolling

Prevent the page from scrolling in Webflow when an element is clicked or an element is visible on the page.

Watch a quick tutorial

Disable Scrolling • Flash Card

Copy Script

For advanced users familiar with this solution. Includes all attributes from this page. Click on attributes and values to copy them.

Required attributes

Disable scroll

Add to Button, Text block, Link block, Div block

fs-scrolldisable-element
=
"
disable
"

Enable scroll

Add to Button, Text block, Link block, Div block

fs-scrolldisable-element
=
"
enable
"

Toggle scroll

Add to Button, Text block, Link block, Div block

fs-scrolldisable-element
=
"
toggle
"

When visible

Add to any element

fs-scrolldisable-element
=
"
when-visible
"

Smart Nav

Add to Navbar

fs-scrolldisable-element
=
"
smart-nav
"

Optional attributes

Preserve scroll

Add to Div, Rich Text, Section

fs-scrolldisable-element
=
"
preserve
"

Scrollbar gap

Add to element using fs-scrolldisable-element

fs-scrolldisable-gap
=
"
false
"

CSS Media Query

Add to element using fs-scrolldisable-element

fs-scrolldisable-media
=
"
CSS_MEDIA_QUERY
"
1

Add this <script> inside the <head> tag of your page or project

This script is the universal Attribute script: you only need to include it once, even if you have multiple Attribute solutions on the page. Learn more .

<script async type="module"
src="https://cdn.jsdelivr.net/npm/@finsweet/attributes@2/attributes.js"
fs-scrolldisable
></script>

Copy Script
2

Choose the option you want

Enable & Disable Scroll
Toggle Scroll
When Element is Visible
Smart Nav
3

Add these required attributes to the elements

Disable Scroll

A click on this element disables page scrolling
fs-scrolldisable-element
=
"
disable
"

Clicking on this element disables page scrolling. This element can be a Button, a Text Block, a Link Block, or a Div Block.

Add this attribute:
Name
fs-scrolldisable-element
Copy
Value
disable
Copy
Add it to those type(s) of element(s):
Button
Text Block
Link Block
Div Block

Enable Scroll

A click on this elements activates page scrolling
fs-scrolldisable-element
=
"
enable
"

Clicking on this element re-enables page scrolling. This element can be a Button, a text Block, a Link Block, or a Div Block.

Add this attribute:
Name
fs-scrolldisable-element
Copy
Value
enable
Copy
Add it to those type(s) of element(s):
Button
Text Block
Link Block
Div Block
3

Add these required attributes to the elements

Toggle

A single element can toggle Scroll Disable on and off
fs-scrolldisable-element
=
"
toggle
"

Clicking the element toggles page scrolling on and off.

Add this attribute:
Name
fs-scrolldisable-element
Copy
Value
toggle
Copy
Add it to those type(s) of element(s):
Button
Text Block
Link Block
Div Block
3

Add these required attributes to the elements

When Visible

If this element is visible, scroll is disabled
fs-scrolldisable-element
=
"
when-visible
"

Scrolling will be disabled when the element is visible on the page, meaning it's not set to display: none.

Add this attribute:
Name
fs-scrolldisable-element
Copy
Value
when-visible
Copy
Add it to those type(s) of element(s):
Any element
IMPORTANT

It's crucial that this element can be shown or hidden through interactions or CSS classes. The system monitors the element's display status, disabling page scrolling when the element is visible (not set to display: none) and allowing scrolling when the element is hidden.

EXAMPLE

This attribute should not be applied to the element you click on to disable scrolling. Instead, it must be placed on an element whose visibility is controlled by the clicked element, using Webflow's Interactions "Hide/Show" action.

For instance, if you've configured an Interaction that opens a popover window, you simply need to assign this attribute to the element that changes from display: none to display: block (or Flex or Grid). Scrolling will automatically be disabled when the popover appears and re-enabled when it is closed.

3

Add these required attributes to the elements

Smart Nav

Disable scrolling when nav menu opens
fs-scrolldisable-element
=
"
smart-nav
"

When set to the Navbar component, page scrolling will be disabled whenever the Nav Menu is open. When the Nav Menu is closed, page scrolling will be enabled.

Add this attribute:
Name
fs-scrolldisable-element
Copy
Value
smart-nav
Copy
Add it to those type(s) of element(s):
Navbar
4

Publish your project! Done, easy right?

Check more elements and settings below
Optional

Add more

elements

Preserve

Keep this element scrollable
fs-scrolldisable-element
=
"
preserve
"

Applying this to the element allows it to remain scrollable, maintaining its scrolling capability even when page scrolling is turned off.

However, on certain devices (notably iOS), users may experience difficulties scrolling within scrollable elements if page scrolling is disabled.

Add this attribute:
Name
fs-scrolldisable-element
Copy
Value
preserve
Copy
Add it to those type(s) of element(s):
Div Block
Rich Text
Section
Optional

Add more

settings

Scrollbar Gap

Control the scrollbar reserved space
fs-scrolldisable-gap
=
"
false
"

By default, when scrolling on the page is disabled, space for the scrollbar width is still reserved. This prevents the content from stretching and shifting to the right.

To stop this from happening, you can set the option to false, which will not reserve space for the scrollbar width.

Add this attribute:
Name
fs-scrolldisable-gap
Copy
Value
false
Copy
Add it to any element with
fs-scrolldisable-element="disable"
fs-scrolldisable-element="enable"
fs-scrolldisable-element="toggle"
fs-scrolldisable-element="when-visible"
script icon
Script tag
?

CSS Media Query

Disable scrolling only on certain devices
fs-scrolldisable-media
=
"
CSS_MEDIA_QUERY
"

Restrict scroll disabling to certain media queries. Replace CSS_MEDIA_QUERY by your chosen media query.

EXAMPLE

To disable scrolling on screens narrower than 478px, use:
fs-scrolldisable-media = "(max-width: 478px)".

To disable scrolling on screens wider than 992px, use:
‍fs-scrolldisable-media = "(min-width: 992px)".

To disable scrolling on screens between 478px and 1920px in width, use:
‍fs-scrolldisable-media = "(min-width: 478px) and (max-width: 1920px)".

Add this attribute:
Name
fs-scrolldisable-media
Copy
Value
CSS_MEDIA_QUERY
Copy
Example:
fs-scrolldisable-media = "(max-width: 478px)"
Example:
fs-scrolldisable-media = "(min-width: 478px) and (max-width: 1920px)"
Add it to any element with
fs-scrolldisable-element="disable"
fs-scrolldisable-element="enable"
fs-scrolldisable-element="toggle"
fs-scrolldisable-element="when-visible"
script icon
Script tag
?

Still need help?

Get Support