Prevent Body Scroll on Click

When clicking something lock the scroll of <body> if it isn’t already locked (set to overflow: hidden;). This is useful for things like opening modals, a mobile nav, etc. to ensure the user doesn’t have two levels of scrolling occurring at once.

Update the classes of .nav-button and .nav-overlay in the snippet below with the class you use on the mobile menu button and an overlay div that covers the rest of the screen if needed when the mobile menu is open. If you don’t have a separate overlay div, you can also target the native one that is part of the native Nav element in Webflow, which has the class of .w-nav-overlay.

Industries

Creators

Have feedback or a question related to this item? Drop us some feedback!

Curated: 
2.11.22

Similar items

Advertise with No-Code Supply Co.

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

Oovra

12.14.23

Creating Accessible UI Animations

12.14.23

AI Modernism Of Kharkiv

12.12.23

10 On-scroll Typography Effects

12.12.23

Readymag Websites of the Year 2023

12.12.23

Eurecah

12.12.23

Nucleo

12.12.23

Looop

12.11.23

‎Bard

12.11.23

Krea

12.11.23

ToolKit™ by The Brand Identity

12.8.23

Clip Path Bae Webflow App

12.8.23

Superlist

12.8.23

Bricklane

12.8.23

Measured Financial

12.8.23

Stainless

12.8.23

Method of Action

12.8.23

Corners

12.8.23

After

12.8.23

Alvaria

12.8.23

Whiteboard

12.8.23

BMW Insured Warranty

12.7.23

GSAP Crash Course for Webflow

12.6.23

Respell

12.6.23

MAST CSS Framework for Webflow — a quick explainer and comparison

12.6.23

Cedro Agency

12.6.23

Clay

12.6.23

AirOps

12.6.23

Heirloom

12.4.23

Lightbox Inside Webflow Rich Text

12.4.23

Tend UK

12.4.23

Fastgen

12.4.23

YouVersion for Churches

12.4.23

WebDesigner.tools

12.1.23

Jamabuck Studio

12.1.23

Alpine.js

12.1.23

AppFlowy.IO

12.1.23

LeaseUp

11.29.23

Animate a Video With Native Webflow Interactions

11.28.23

Dark Mode Toggle With Webflow Variables

11.28.23

Snog Productions

11.28.23

Defacto

11.28.23

The Code Flow

11.28.23

Specify

11.27.23

What CSS length unit should you use?

11.27.23

Bromley&Co

11.27.23

Buff Motion

11.27.23

Webflix Studio

11.27.23

Magnific AI

11.27.23

Teenage Engineering Button

11.27.23

Codux

11.27.23
Load more

Bummer, no results

Try a different search/filter combo, or drop us some feedback if there is something missing you would love to see!

Reset filters

Subscribe for updates

Get updates on the latest curated resources and be the first to hear of new features.