Functional
Disable Scrolling
Prevent the page from scrolling in Webflow when an element is clicked or an element is visible on the page.
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.
DISABLE SCROLL
I want this
Button, Text Link, Link Block, or Div Block
to disable scrolling on the page
See how it works
Add this attribute
Description
Name
fs-scrolldisable-element
Value
disable
When clicking the element, page scrolling will be disabled.
ENABLE SCROLL
I want this
Button, Text Link, Link Block, or Div Block
to enable scrolling on the page
See how it works
Add this attribute
Description
Name
fs-scrolldisable-element
Value
enable
When clicking the element, page scrolling will be enabled.
TOGGLE SCROLL
I want this
Button, Text Link, Link Block, or Div Block
to toggle scrolling on the page
See how it works
Add this attribute
Description
Name
fs-scrolldisable-element
Value
toggle
When clicking the element, page scrolling will be toggled.
WHEN VISIBLE
I want to disable scrolling when
Div Block or any element
is visible on the page
See how it works
Add this attribute
Description
Name
fs-scrolldisable-element
Value
when-visible
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.
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.
Add this attribute
Description
Name
fs-scrolldisable-element
Value
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.
PRESERVE
When page scrolling is disabled, I want this
Div Block, Rich Text Block or Section
to still be scrollable
See how it works
Add this attribute
Description
Name
fs-scrolldisable-element
Value
preserve
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.
In some devices (especially iOS), users might not be able to scroll in scrollable elements when the page scrolling is disabled.
Option
SCROLLBAR GAP
I want this to maintain the scrollbar gap when scrolling is disabled
See how it works
Add this attribute
Description
Name
fs-scrolldisable-gap
Value
false
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.
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.
Option
CSS MEDIA QUERY
I want to control which breakpoints will be influenced by scroll disable
See how it works
Add this attribute
Description
Name
fs-scrolldisable-media
Value
CSS_MEDIA_QUERY
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)"
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
Example 2
Toggle Scrolling
Example 3
When Visible
Show this element --->
Scrolling will be disabled when I'm visible and enabled when not!
Frequently Asked Questions
Everything you need to know about this attributes solution.
No FAQ items found yet. Join Finsweet Community on Slack if you have any question related to this solution.
Developer documentation
Check the dev documentation
Next time implement inside Webflow
Use Finsweet Extension
