Scroll Disable

Disables scrolling on certain events

Overview

The Scroll Disable attribute allows you to disable (and re-enable) page scrolling based on various triggers. This is particularly useful for modals, mobile menus, and other overlay interfaces where you want to prevent background scrolling.

Attribute Syntax

Elements

fs-scrolldisable-element · string · required

Defines how the element controls scrolling:

• when-visible - Disables scrolling when the element is visible, enables when hidden
• enable - Enables scrolling when clicked
• disable - Disables scrolling when clicked
• toggle - Toggles scrolling on/off when clicked
• smart-nav - For Webflow Navbar components; disables scrolling when nav menu is open
• preserve - Applied to elements that should remain scrollable when page scrolling is disabled

Settings

fs-scrolldisable-media · string

Defines a media query that restricts when an element acts as a trigger. Useful for only disabling scroll on mobile devices.

fs-scrolldisable-gap · boolean · default: "true"

Defines whether to reserve space for the scrollbar when disabling scroll. Set on the <script> tag. Prevents layout shift when scrollbar disappears.

fs-scrolldisable-overflow · string

Defines the overflow type used to disable scrolling:

• hidden - Default; hides scrollbar
• clip - Clips content without scrollbar

Usage Examples

Modal with Scroll Disable

<!-- Disable scroll when modal is visible -->
<div 
  class="modal" 
  fs-scrolldisable-element="when-visible"
  style="display: none;">
  <div class="modal-content">
    <h2>Modal Title</h2>
    <p>Modal content...</p>
    <button class="close">Close</button>
  </div>
</div>

Common Use Cases

Modal Dialogs

Prevent background scrolling when modals are open:

<div class="modal-overlay" fs-scrolldisable-element="when-visible">
  <div class="modal-content" fs-scrolldisable-element="preserve">
    <!-- Modal content here -->
  </div>
</div>

Mobile Navigation

Disable scrolling when mobile menu is open, only on mobile devices:

<nav 
  class="mobile-nav" 
  fs-scrolldisable-element="when-visible"
  fs-scrolldisable-media="(max-width: 767px)">
  <!-- Navigation items -->
</nav>

Side Drawers

Prevent background scroll when side panels are visible:

<div class="drawer" fs-scrolldisable-element="when-visible">
  <div class="drawer-content" fs-scrolldisable-element="preserve">
    <!-- Drawer content -->
  </div>
</div>

Fullscreen Search

Disable scroll when fullscreen search overlay is active:

<div class="search-overlay" fs-scrolldisable-element="when-visible">
  <input type="search" placeholder="Search...">
  <!-- Search results -->
</div>

Cookie Banners

Force users to interact with cookie consent (use carefully for UX):

<div class="cookie-banner" fs-scrolldisable-element="when-visible">
  <p>We use cookies...</p>
  <button fs-scrolldisable-element="enable">Accept</button>
</div>

Element Types Explained

when-visible

Automatically manages scroll state based on element visibility:

• Element visible → Scroll disabled
• Element hidden → Scroll enabled

Best for: Modals, overlays, popups

enable / disable

Manual control via click events:

• Click → Changes scroll state once

Best for: Custom toggle buttons, form interactions

toggle

Toggles scroll state on each click:

• First click → Disable scroll
• Second click → Enable scroll
• Third click → Disable scroll
• …

Best for: Toggle buttons, hamburger menus

smart-nav

Automatic handling for Webflow Navbar components:

• Detects when nav menu opens/closes
• Disables scroll when open
• Re-enables when closed

Best for: Webflow’s native navbar component

preserve

Allows specific elements to remain scrollable when page scroll is disabled:

• Parent scroll: Disabled
• This element: Still scrollable

Best for: Modal content areas, scrollable lists in overlays

Media Query Usage

Common media query values:

<!-- Mobile only -->
fs-scrolldisable-media="(max-width: 479px)"

<!-- Mobile and tablet -->
fs-scrolldisable-media="(max-width: 767px)"

<!-- Tablet and below -->
fs-scrolldisable-media="(max-width: 991px)"

<!-- Desktop only -->
fs-scrolldisable-media="(min-width: 992px)"

<!-- Portrait orientation -->
fs-scrolldisable-media="(orientation: portrait)"

Webflow Navbar Integration

For Webflow’s navbar component, use the smart-nav element:

<div class="navbar" data-animation="default" data-collapse="medium">
  <!-- Add smart-nav to the navbar wrapper -->
  <nav 
    class="nav-menu" 
    fs-scrolldisable-element="smart-nav"
    fs-scrolldisable-media="(max-width: 991px)">
    <!-- Navbar structure -->
  </nav>
</div>

The attribute automatically detects:

• Navbar open/close state
• Which breakpoint is active
• Whether to disable scroll

Scrollbar Gap

By default, the attribute reserves space for the scrollbar to prevent layout shift:

With gap (default):

• Content doesn’t shift when scrollbar disappears
• Better user experience
• Recommended for most use cases

Without gap:

<script 
  src="..."
  fs-scrolldisable-gap="false">
</script>

• Content may shift when scrollbar disappears
• Useful if you’re handling layout yourself

Technical Details

How It Disables Scroll

The attribute uses the tua-body-scroll-lock library, which:

1. Prevents touch-based scrolling on mobile
2. Prevents mouse wheel scrolling on desktop
3. Prevents keyboard scrolling (space, arrow keys)
4. Maintains scroll position
5. Allows nested scrollable elements

Preserved Elements

Elements with fs-scrolldisable-element="preserve" can still be scrolled using:

• Touch gestures
• Mouse wheel
• Scrollbar dragging

The attribute uses overflow: hidden (or clip) on the <body> element to disable scrolling. This is the most reliable cross-browser method.

Always pair scroll disable with a clear way to re-enable scrolling (like a close button) to avoid trapping users.

Disabling scroll can impact accessibility. Ensure users can still navigate your content via keyboard and that focus management is properly handled.