How to add an attribute:

close icon
Hey! Give us some feedback here.
Functional

Disable Scrolling

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

Disable Scrolling
Step #1

Copy the Solution <script> and paste into the <head> of your page

copy icon
Copy Script
Step #2

Implement in Webflow

Apply attributes to elements on the page

Below is a list of elements and options that are used to create this Attributes functionality. Click any of them to see more details.

navigator arrow
DISABLE SCROLL
I want this
button icon

Button, Text Link, Link Block, or Div Block

to disable scrolling on the page
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-scrolldisable-element
copy icon
Value
disable
copy icon
Check live example here
When clicking the element, page scrolling will be disabled.
how to add scroll disable attribute
navigator arrow
ENABLE SCROLL
I want this
button icon

Button, Text Link, Link Block, or Div Block

to enable scrolling on the page
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-scrolldisable-element
copy icon
Value
enable
copy icon
Check live example here
When clicking the element, page scrolling will be enabled.
how to add scroll enable attribute
navigator arrow
TOGGLE SCROLL
I want this
button icon

Button, Text Link, Link Block, or Div Block

to toggle scrolling on the page
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-scrolldisable-element
copy icon
Value
toggle
copy icon
Check live example here
When clicking the element, page scrolling will be toggled.
how to add scroll disable toggle attribute
navigator arrow
WHEN VISIBLE
I want to disable scrolling when
div block icon

Div Block or any element

is visible on the page
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-scrolldisable-element
copy icon
Value
when-visible
copy icon
Check live example here
Scrolling will be disabled whenever the element is visibly present on the page (when the element is not set to display: none).

Important: This element must be the affected by interactions/CSS classes to be displayed/hidden. We will watch when this element is set to display none and apply scrolldisable when this element is not set to display none.
how to add scroll disable when visible attribute
navigator arrow
SMART NAV
I want to disable scrolling automatically when the
navbar icon

Navbar

component is open
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-scrolldisable-element
copy icon
Value
smart-nav
copy icon
Check live example here
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.
how to add scroll disable navbar attribute
navigator arrow
PRESERVE
When page scrolling is disabled, I want this
div block icon

Div Block, Rich Text Block or Section

to still be scrollable
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-scrolldisable-element
copy icon
Value
preserve
copy icon
When applied to this element, the will still be scrollable. The scrolling will be preserved for this element while page scroll is disabled.

In some devices (especially iOS), users might not be able to scroll in scrollable elements when the page scrolling is disabled.
navigator arrow
Option
SCROLLBAR GAP
I want this to maintain the scrollbar gap when scrolling is disabled
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-scrolldisable-gap
copy icon
Value
false
copy icon
By default, the scrollbar width is reserved when disabling scrolling on the page to prevent all the content being stretched and pushed to the right.

If you want to prevent this behavior, you can disable it by setting it to false.
Where?
This attribute can be applied to any element that triggers scrolldisable on the page. Apply this open to "enable", "disable", "toggle" or "when-visible" elements.
navigator arrow
Option
CSS MEDIA QUERY
I want to control which breakpoints will be influenced by scroll disable
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-scrolldisable-media
copy icon
Value
CSS_MEDIA_QUERY
copy icon
Limit disable scroll to specific media query.

Examples:
fs-scrolldisable-media = "(max-width: 478px)"
fs-scrolldisable-media = "(min-width: 992px)"
fs-scrolldisable-media = "(min-width: 478px) and (max-width: 1920px)"
Where?
This attribute can be applied to any element that triggers scrolldisable on the page. Apply this open to "enable", "disable", "toggle" or "when-visible" elements.

Working examples

See this solution working live in this Webflow project.

Example 1
Disable and Enable
Copy and paste this example directly on Webflow
copy icon
Copy this example
Example 2
Toggle Scrolling
Copy and paste this example directly on Webflow
copy icon
Copy this example
Toggle Scrolling
Example 3
When Visible
Copy and paste this example directly on Webflow
copy icon
Copy this example
Show this element --->
Scrolling will be disabled when I'm visible and enabled when not!
Example 4
Smart Nav
Copy and paste this example directly on Webflow
copy icon
Copy this example

Developer documentation

external link icon

Next time implement inside Webflow

external link icon

Free Finsweet support on Slack

Subscribe

Sign up for future releases!

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.