Code
Snippet
/ 

Prevent Body Scroll on Click

View 
 
Snippet
*
 ↗
View 
Snippet
 ↗
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.

Tags

Javascript
Click
Scroll

Industries

Creators

Corey Moen

Share this item

Twitter
Facebook
LinkedIn

Related items

Load more

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

Curated: 
2.11.22

Similar items

Items
0
Layout
Grid View
Row View
Preview
↗

Advertise with No-Code Supply Co.

Promote your product (or yourself!) to our engaged audience looking for recommendations.
View item
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Colorables
Inspo
Website
/ 

Colorables

4.1.20
Creative, Gallery, Utility, Webflow
Show/Hide Based on Date/Time
Code
Snippet
/ 

Show/Hide Based on Date/Time

3.27.20
Javascript, Hide/Show, Time, Corey Moen
Click to Copy to Clipboard
Code
Snippet
/ 

Click to Copy to Clipboard

3.25.20
Javascript, Set
7 Things to Know About Webflow
Learn
Video
/ 

7 Things to Know About Webflow

3.19.20
Why Webflow, Webflow
Social Share Links + Open Graph Meta Data
Code
Snippet
/ 

Social Share Links + Open Graph Meta Data

3.19.20
HTML, SEO
Back to Previous Page Button
Code
Snippet
/ 

Back to Previous Page Button

3.11.20
Jquery, Click, Navigate, Corey Moen
Appcues
Inspo
Website
/ 

Appcues

3.11.20
SAAS, Marketing, Webflow
Gemnote
Inspo
Website
/ 

Gemnote

3.11.20
Apparel, Marketing, Webflow
Vovi
Inspo
Website
/ 

Vovi

2.29.20
Creative, Marketing, Portfolio, Agency, Webflow
Webflow Lightbox Custom Overlay Color
Code
Snippet
/ 

Webflow Lightbox Custom Overlay Color

2.28.20
CSS, Aesthetic, Webflow
Bravo Studio App
Tools
App
/ 

Bravo Studio App

2.28.20
Frontend, Mobile Apps
Dwellito
Inspo
Website
/ 

Dwellito

2.28.20
Environment, Housing, Marketing, Ecommerce, Webflow
Rapper Radio
Inspo
Website
/ 

Rapper Radio

2.28.20
Creative, Music, Marketing, Utility, Webflow
Me | Today
Inspo
Website
/ 

Me | Today

2.28.20
Health & Wellness, Marketing, Ecommerce, Webflow
YCode
Tools
App
/ 

YCode

2.28.20
Backend, Frontend, Web Apps
Custom Scrollbar
Code
Snippet
/ 

Custom Scrollbar

2.27.20
CSS, Aesthetic, Scroll
Unqork
Tools
App
/ 

Unqork

2.27.20
SAAS, Backend, Frontend
Petal
Inspo
Website
/ 

Petal

2.25.20
Financial, SAAS, Marketing, Webflow
Print a Specific Element w/ Button
Code
Snippet
/ 

Print a Specific Element w/ Button

2.21.20
Javascript, Print, Corey Moen
Stacker
Tools
App
/ 

Stacker

2.21.20
Automation, Backend, Database, Creating a User Portal for Airtable, Stacker App + Airtable = Awesome Webflow Team Management
Autocode
Tools
App
/ 

Autocode

2.21.20
Automation, Backend, Build a Buzzfeed Style Quiz in Webflow
Mobile Tabs to Dropdown
Learn
Video
/ 

Mobile Tabs to Dropdown

2.16.20
How To, Tabs, Webflow, PixelGeek
Patra Capital
Inspo
Website
/ 

Patra Capital

2.12.20
Financial, Marketing, Portfolio, Webflow
Text Bottom Border Animation on Hover
Code
Snippet
/ 

Text Bottom Border Animation on Hover

2.5.20
CSS, Aesthetic, Animation
Jomor Design
Inspo
Website
/ 

Jomor Design

2.5.20
Creative, Portfolio, Personal, Webflow, Jo Mor
Paragon
Tools
App
/ 

Paragon

2.4.20
SAAS, Automation, Backend
Play
Tools
App
/ 
Website

Play

2.4.20
No-code, SAAS, Mobile Apps, Landing, Marketing, Webflow
Set Text to Today's Date
Code
Snippet
/ 

Set Text to Today's Date

2.3.20
Javascript, Set, Time, Corey Moen
Pest Stop Boys
Inspo
Website
/ 

Pest Stop Boys

1.30.20
Trades, Landing, Marketing, Webflow
Klokki
Inspo
Website
/ 

Klokki

1.30.20
SAAS, Marketing, Utility, Webflow
Unite America
Inspo
Website
/ 

Unite America

1.29.20
Political, Marketing, Webflow, Shapemaker
Cottage Grove Church
Inspo
Website
/ 

Cottage Grove Church

1.29.20
Religious, Marketing, Webflow
Unicorn Factory
Inspo
Website
/ 

Unicorn Factory

1.29.20
Creative, Gallery, Utility, Webflow
EZ GIF
Tools
Utility
/ 

EZ GIF

1.25.20
Optimize, Assets, Animation
Betty Blocks
Tools
App
/ 

Betty Blocks

1.25.20
Backend, Web Apps
AppSheet
Tools
App
/ 

AppSheet

1.25.20
Database, Mobile Apps
Userbase
Tools
App
/ 

Userbase

1.25.20
SAAS, Authentication, Extending
Obviously Ai
Tools
App
/ 

Obviously Ai

1.23.20
AI, Visualization, API
Wappler
Tools
App
/ 

Wappler

1.22.20
SAAS, CMS, Web Apps
Rows
Tools
App
/ 

Rows

1.22.20
Data Management, Database, Web Apps
Tadabase
Tools
App
/ 

Tadabase

1.22.20
SAAS, Database, Web Apps
Hide Static Element if Webflow CMS Collection is Empty
Code
Snippet
/ 

Hide Static Element if Webflow CMS Collection is Empty

1.19.20
Javascript, CMS, Hide/Show, Webflow
Building an online school in Webflow
Learn
Article
/ 

Building an online school in Webflow

1.14.20
SEO, Why Webflow, Webflow
TSE Culture Manual
Inspo
Website
/ 

TSE Culture Manual

1.13.20
Creative, Marketing, Webflow
Aesthetica
Inspo
Website
/ 

Aesthetica

1.10.20
Health & Wellness, Landing, Marketing, Webflow
Dockyard Social
Inspo
Website
/ 

Dockyard Social

1.10.20
Events, Networking, Landing, Marketing, Ecommerce, Webflow
Hide/Show Element From <select>
Code
Snippet
/ 

Hide/Show Element From <select>

1.6.20
Jquery, Hide/Show, Forms, Corey Moen
Click This to Click That
Code
Snippet
/ 

Click This to Click That

1.6.20
Javascript, Click
Page Change Click Delay
Code
Snippet
/ 

Page Change Click Delay

1.6.20
Javascript, Navigate, Time, Corey Moen
Thunkable
Tools
App
/ 

Thunkable

12.29.19
No-code, Mobile Apps
The Finish Line Is Never The End
Inspo
Website
/ 

The Finish Line Is Never The End

12.23.19
Transportation, Film, Marketing, Webflow
Bildr
Tools
App
/ 

Bildr

12.22.19
Backend, Web Apps
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.