Disable body scrolling | Class Adder for Webflow Interactions
HTML-код
- Опубликовано: 25 июн 2020
- Learn how to disable ‘body’ scrolling when a modal is open on your Webflow website. Useful for modals that need scrolling, like a long sign-up form.
TIMESTAMPS:
00:09 - Use case #2
00:25 - The problem (without the Class Adder)
01:18 - The solution - live example
01:49 - Start of the tutorial
03:05 - The build
03:44 - Finsweet Class Adder
05:55 - Watch the Class Adder working live using Webflow Preview
06:09 - Thank you
CLASS ADDER FOR WEBFLOW INTERACTIONS: Trigger the add and remove of classes on click, hover, scroll in/out of view, or page-load with @Finsweet's Class Adder Interactions Tool for @Webflow.
See all videos from the playlist: • Finsweet Class Adder f...
-----------------------------------------------
// RESOURCES FROM THE VIDEO
Class Adder: class-adder.finsweet.com/#use...
Class Adder Webflow cloneable: finsweet.com/classadder-clonable
Class Adder Interactions Tool: class-adder-script-writer.fin...
Get FREE help with implementation: sweetjs.finsweet.com/
Subscribe to Finsweet: ruclips.net/user/Finsweet?su...
-----------------------------------------------
// ABOUT US
We’re Finsweet - a Webflow enterprise partner, badass product creator, and educational content powerhouse. We are taking Webflow to a new level and sharing everything with you along the way!
🙌 Join our community - finsweet.com/fin-pro
🛍 Shop our merch store - finsweet.com/merch
💪 Superpowers for your Webflow website - finsweet.com/attributes
🧰 Your toolkit for Webflow - finsweet.com/extension
-----------------------------------------------
// SOCIAL
Facebook: /
Twitter: / thatsfinsweet
Instagram: /
Dribbble: dribbble.com/thatsfinsweet
Behance: www.behance.net/thatsfinsweet/
Webflow: webflow.com/team/Finsweet/
-----------------------------------------------
// TAGS
#ClassAdder #Webflow #Interactions
-----------------------------------------------
Thanks for your support! 🤟
yeas, it worked fine! I added another trigger-class for the background (clicking the background behind the modal will close it too). Finsweet wrote the script very well. Thank you!
Mine didn't seem to be working at first until I did one crucial step... I had to create the "no-scroll" class on the body element and set the overflow to hidden. Then I removed the class from the body element (since it has been created), and the code worked just fine. Thank you!
Uhhhhh. Holy Crap! You're a freaking genius! Just changed my life, thanks for sharing!
Epic, you deserve much more subscribers with no doubt! Super high quality, thx for the awesome job.
We're super thrilled hearing that!!! Thank you!!!
Dude that was so lit and such a breeze to implement.. great job!
Glad you enjoyed it!!
This worked like a charm!
Worked amazing for me, this was what I was looking for. Thank you, dude!
Hello Finsweet,
I watch a lot of RUclips videos and also your live broadcasts and I really have to tell you: YOU ARE FANTASTIC!
I love your content, please keep doing it - Webflow is still a bit special at the moment and not as many use it as they should. If people like you keep generating good content, I'm sure Webflow will have a great future.
Many thanks for everything
Greetings from Austria
Wolfgang
Thanks for the kind words. No plans to stop anytime soon.
thanks a lot for your tutorial!
thanks, so simple to implement.
Worked out perfectly! Thank you✌️
You're welcome!!
man this is awesome! thank you so much!
You're welcome!!!
Great stuff. Love that!
Thank you!!!
wow, thank you so much!!!
You're welcome!!!
Wow man. You are amazing. Thank you
You're welcome!!!
this is great, thanks for it
You're welcome!!!
thank you so much!!
You're welcome!!
Thank you bro.....
You're welcome!!!
Thank you so much for this. Quick question: I have the ".no-scroll" and ".open-modal" classes added, but where do you actually add the ".close-modal" class?
Thank you so much for the tutorial!
I'm trying to make this work in a native Webflow mobile nav and can't figure out how to remove the no-scroll from the body when clicking a menu item as well. Do you write this as a separate scrip or does it form part of the same script?
This no longer works. Can anyone else confirm this?
Nice, I would like have that JS code for my project. Thank you.
You're welcome! You can generate the code visually - class-adder-script-writer.finsweet.com/
Nice video! Thanks :). Do you have a video where you explain how you build this? The scroll in the content part. I'm trying to make this. But I have no clue how to!
You're welcome!!! You can clone the site and reverse engineer - webflow.com/website/Class-Adder-Interactions-Tool-How-To
@@Finsweet Thank you! I already done that! :) Works great!
what tool is it ?
Will it disable scrolling for ios and touch devices?
This isn't working on Safari iOS 15, it just scrolls past at certain points and not others, any fix for that?
My website is automatically scrolling up to the top on mobile view. How can I disable that.
Hey, it seems that putting the body of the page in "hidden" doesn't scroll on my side.
However I did check if the "no-scroll" class was added when I hover over the relevant div and it is added. Do you have a solution to this problem?
Hey! Message us on sweetjs.io for help with implementation!
HI, set .no-scroll: {height:100vh;}
@@Vlad-vd2on this saved me thank you so much!!!
@@Vlad-vd2on you saved me too! didn't work until I did this!
Hi I cant get inte to work.. I have all my sections in one div so I can use fullpage snapping. Does this interfere with the (no body scroll ) script, or do you know what it can be ? 😊 thnx
I have the exact same issue. Did you solve it?
Where does the class no-scroll come from? its not working on my website
Hey! Thanks for using our product. Please send us a message on www.sweetjs.io/ and we might be able to help you! 🙂
Can this work with the webflow IX2 as well on the same trigger?
Hey Jesse, yes it should without any issue
This is great. I have a button that works as both the open and close trigger. Found another script on the webflow forum but after the second click it removes the modal alright but stalls/prevent scrolling the page. I really hope this class adder will do the trick.
looks like not working in IOS safari :(
Send us a message on sweetjs.io, and we'll try to help you with this!
Header shifts to the left when modal is opened
Send us a message on www.sweetjs.io/ and we'll help you fix this!
Doesn't work for me. I've literally spent months trying to solve this problem but I just can't get any solution to work... gah!
Send us a message on sweetjs.io and one of our devs will help you out!