Hi @sabanna,
Thanks for this script it saves me a lot of time.
However, recently, I noticed that it doesn’t work anymore (when my modal is active, the body is still scrolling. But last month this piece of code was just working right…).
May be Webflow changed his settings about this…
I’ve just added “,html” just near “body” in the code and it worked for me.
I thought it could be helpful for anyone else…
Regards,
Alain
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.
Hello everyone!
I know it’s long time passed, but since many webflowers are using this workaround just wanted to share another code snippet that will work with 
Webflow navbar component.
This code will prevent the page from scrolling when a menu is open:
UPDATE:
There is a bug when iOS doesn’t prevent users from scrolling past the modal if there is content that exceeds the viewport height, despite adding overflow:hidden to the CSS.
iOS bug created in 2016 solved only in May 2019 but they have no idea when it will be released.
https://bugs.webkit.org/show_bug.cgi?id=153852
So I had to update the code below with the additional enhancement which detects the OS of the device and does a bit of a different approach if it is iOS.
<script>
// Detecting if it is an iOS device, true/false
var iOS = !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform);
$(document).ready(function(){
// Defining that "overlay" is the element that has a changing display value
var overlay = document.querySelector('.w-nav-overlay');
// Creating our mutation observer, which we attach to overlay later
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutationRecord) {
// Checking if it's the style attribute got changed and if display value now set to 'none'?
if( mutationRecord.attributeName === 'style' && window.getComputedStyle(overlay).getPropertyValue('display') !== 'none'){
//Overlay's display value is no longer 'none', now changing the "body" styles:
if (iOS) {
// for iOS devices:
var x = $(window).scrollTop().toFixed()
$('body').css({'overflow': 'hidden',
'position': 'fixed',
'top' : '-' + x + 'px',
'width': '100vw'});
}
// for all other devices:
$('body').css('overflow', 'hidden');
}
//Overlay's display value back to 'none' , now changing the "body" styles again:
else {
if (iOS) {
// for iOS devices:
var t = $('body').css('top').replace('-','').replace('px','')
$('body').css({'overflow': 'auto',
'position': '',
'width': '100vw'});
$('body').animate({scrollTop:t}, 0);
}
// for all other devices:
$('body').css('overflow', '');
}
});
});
// Attach the mutation observer to overlay, and only when attribute values change
observer.observe(overlay, { attributes : true, attributeFilter : ['style']});
});
</script>
The snippet can be used regardless of the class-names you are using in your project.
Happy designing!
Anna
There is a bug when iOS doesn’t prevent users from scrolling past the modal if there is content that exceeds the viewport height, despite adding overflow:hidden to the CSS.
iOS bug created in 2016 solved only in May 2019 but they have no idea when it will be released.
https://bugs.webkit.org/show_bug.cgi?id=153852
So I had to update the code (
in the previous comment) with the additional enhancement which detects the OS of the device and does a bit of a different approach if it is iOS.
<script>
Webflow.push(function() {
$('.menu-button-class').click(function(e) {
e.preventDefault();
$('body').css('overflow', 'hidden');
});
$('.menu-class-name').click(function(e) {
e.preventDefault();
$('body').css('overflow', 'auto');
});
});
</script>
Hi @sabanna
Is there a way to have the same element be the trigger to start and stop the scroll.
So on the first click the element disables scroll and on the second click it enables scroll?
I’m using this for a custom hamburger menu and want to use the same icon to open and close the menu.
Thanks,
James
Problem solved, I managed to figure it out.
Here is the script for anyone else who may need to use it:
<script>
Webflow.push(function() {
$('.menu-button-class').click(function(e) {
var clicks = $(this).data('clicks');
if (clicks) {
e.preventDefault();
$('body').css('overflow', 'auto');
} else {
e.preventDefault();
$('body').css('overflow', 'hidden');
}
$(this).data("clicks", !clicks);
});
});
</script>
@jamesgreeny Unfortunately that snippet will not work on the iOS devices
I addressed my friend regarding this issue, he wasn’t a fan of solution suggested by sabanna as it seemed too complex for the issue at hand.
He rewrote one of the scripts provided on this thread to account for iOS webkit issues.
I had to add custom attribute to button element data-clicks=“0”
This works like a charm for my burger menu.
<script>
Webflow.push(function() {
$('.menu-button-class').click(function(e) {
e.preventDefault();
var clicks = $(this).data('clicks');
if (clicks) {
$('body').css({
overflowY: 'scroll',
'-webkit-overflow-scrolling': 'touch',
position: 'inherit',
top: '0'
});
$(window).scrollTop($(this).data('offset'));
} else {
$(this).data('offset', window.pageYOffset);
$('body').css({
overflowY: 'hidden',
height: 'auto',
position: 'absolute',
top: 0 - window.pageYOffset
});
}
$(this).data("clicks", !clicks);
});
});
</script>
I’ve followed your solution but it doesn’t work for me.
preview link
Any idea why?
Thanks
Hi, it should work in published site, can you check and clarify?
Edit: also, published site, previewed in mobile browser, not desktop browser.
Edit 2: I just checked on my own site, solution seemed to not work as it previously did. My suspicion is that there was some fix on iOS 13. I changed overflowY: ‘scroll’, to overflow: ‘scroll’, and
overflowY: ‘hidden’ to overflow: ‘hidden’, seemed to fix the problem and eliminated scroll together with page jumping. Let me know if that works for you @Philemon
<script>
Webflow.push(function() {
$('.menu-button-class').click(function(e) {
e.preventDefault();
var clicks = $(this).data('clicks');
if (clicks) {
$('body').css({
overflow: 'scroll',
'-webkit-overflow-scrolling': 'touch',
position: 'inherit',
top: '0'
});
$(window).scrollTop($(this).data('offset'));
} else {
$(this).data('offset', window.pageYOffset);
$('body').css({
overflow: 'hidden',
height: 'auto',
position: 'absolute',
top: 0 - window.pageYOffset
});
}
$(this).data("clicks", !clicks);
});
});
</script>
@sabanna @jamesgreeny did you find a solution for this? Having the same issue. I’d like to use the same trigger. So on the first click the element disables scroll and on the second click it enables scroll?
Is this possible?
@joseph-webflow was just searching through the forums looking for a solution and happened to come across this, the most recent answer, and it works like a charm on both desktop and mobile. Thank you!
I have done as you have asked and I still am not getting it to work. Did something change?
Works for me but having an issue where none of the links within the menu work. The page doesn’t refresh to the link tapped. Is something blocking the links from being active?
Didn’t work until I put the code into the “before body tag”! After that, it worked
Hi all,
I’ve just run into the same problem for my website:
Can someone please help me out with a custom code on how to disable scrolling of the page – my menu open and menu close interactions are both on the same element.
Your page isn’t working.
Sorry for very late reply, I’m finally back at my portfolio, and yes I just made the same changes for overflowY >to> overflow and now it works fine! Thanks!
Hi there!
I tried all the snippets of code in this thread but none of it seemed to work… anyone figured out a different way of going about this? Or could someone help me out by taking a look:
Menu open en close interactions are both on the same element… thanks in advance!