Streaming live at 10am (PST)

Modal toggle body scroll on/off with only one button

Hi everybody!

I really used the search function here, but I am still having one issue with preventing scrolling when a modal is open.

I saw and used this solution here:

It works really fine, on all browsers and mobile, but in this example, two buttons are used to open and then close the modal. But I only have one. On mobile it works, but not on desktop. When I open the modal, I can not scroll (this is what I want) but when I close it, I want to be able to scroll again (and this does not work). Someone already asked for creating this and the answer was adding “.w–open” which Webflow creates for the second trigger. I tried it and it does not work, neither when I put the code on the page or in custom code in the settings.

Does anyone know how to fix this?

Here is a read only link, I know, custom code does not work in preview mode. I just cloned the link above and deleted the close button:
https://preview.webflow.com/preview/body-scroll?utm_source=body-scroll&preview=1e94329ea8d96ce2c09e7d4469751169

Here the published link:
https://body-scroll.webflow.io

Thanks in advance!
Cheers
Flo

Hey @fhoelterhoff :wave:

You’ve already created the second button and styled it red with a class of close so use this. All you then need to do is replace the class name in the code and it will work.

The second trigger is currently looking for .open .w--open and it can’t find it, therefore the ('overflow', 'auto') is not being fired which is why you cannot scroll when it’s closing.


<script>
// Prevents body scroll on desktop only
Webflow.push(function() {
  $('.open').click(function(e) {
    e.preventDefault();
	$('body').css('overflow', 'hidden');
  });

// ADD THE .close CLASS BELOW TO MAKE IT WORK
  $('.close').click(function(e) {
    e.preventDefault();
	$('body').css('overflow', 'auto');
  });
});
</script>

See the video below for the changes to the interaction you’ll need.

This then produces this result…
CloudApp

Video description

CloudApp

Hope that helps!

Oh hi Mark! :relaxed:

First of all thanks for your quick reply! Well sadly, you modified it to use with a second button, which is the state, that the Webflow project was in the beginning. This is why there was already a class and an interaction. I cloned it from the link I posted. But I need it to run with only one button, which opens and closes the modal on a second click. And this script is sadly not (yet) working with one button only. When I have two everything is fine, exactly as you did it. Do you know the solution, for only using one button?

I am so sorry, I might have not made myself clear enough what I want to achieve. I am really thankful and also sorry that you took your time to help me out.

Definitely no need to be sorry. I may not have the answer you need right now, but I’ll help if I can.
If I can ask what is the use case that you need only one button instead of using two?

Ok thanks :sweat_smile:

It is for my portfolio site, on which I use a hamburger menu button.
You can see it here: https://portfolio-testumgebung.webflow.io
Name/Content and Website is still in progress :slight_smile:

For a scrollable content you have to go there to “About” or the other pages.

That makes much sense!

So here’s a way to do it with just javascript instead of jQuery (which I don’t understand, at all).

First of all, do these steps:

  • Temporarily remove the body class from the body
  • Add a new class called no-overflow
  • Give height of 100% and overflow: hidden to the no-overflow class.
  • Remove the no-overflow class (don’t delete it) then add the body class back again.

This just makes no-overflow available to toggle as a class.

What is happening in the code below is that as you click the open button, the no-overflow class you created is being toggled on the body.

The code is shorter, and if jQuery is updated in the future, then nothing should break.


<script>
// Prevents body scroll on desktop only
var openModal = document.getElementById('open');
var body = document.querySelector('body');

openModal.addEventListener('click', function() {
	body.classList.toggle('no-overflow')
});

</script>

Please note that some older browsers may not support classList so worth checking a few of the main up to date ones, particularly Internet Explorer.

Your site is awesome by the way!!! :metal: :webflow_heart: Let me know how you get on!

You solved it! I can’t believe it! 5 hours I was searching for a solution but nothing worked and now your suggestion just does exactly what I needed! And it is so simple to do! Thank you very very much!

I hope other people with the same problem get to this topic here. Thank you for your time and help! And also for your compliment about my site. I will let you know when it is online, which will be in about 2 weeks. :slight_smile:

:metal:t2:
Flo

For others in summary:
Clone the project from the link in my first post, then go through the steps from magic mark and replace the first script for desktop (from the cloned project) with the awesome one from magicmark, that’s it!

1 Like

Woohoo! So happy it’s worked the way you want it to, yeah it was a lot simpler than I thought too!

My first solution was going to be to add an “invisible div” to act as the second button over your menu button when it’s clicked, which would have worked, but been a bit messy/hacky.

Please do let me know, I will share it with our team for sure and I look forward to seeing it.

Sorry for my late reply!

I am always amazed when someone finds a solution as fast as you did! :slight_smile:

I thought about that messy way, too, because this was something, I could have done by myself without scripting :sweat_smile: But as you said, it would be not the cleanest way :slight_smile: Your way is working perfect.

When the site is online, I will will message you. Right now I am filling it with content, and it is super easy, because I built everything with CMS :partying_face::sunglasses:

1 Like