Hi community,
When I open the full screen menu, the page is still scrollable.
How can I fix this? I already added the code.
Greats,
Bram
Here is my site Read-Only: LINK
Hi community,
When I open the full screen menu, the page is still scrollable.
How can I fix this? I already added the code.
Greats,
Bram
Here is my site Read-Only: LINK
Hi! I just made something similar in my website, turns out that my native nav component put a “nav-” before my class name, so open your published project and make sure the classname of your button is correct (even if is the exact name you put it may have changed a bit)
That was what worked for me, everything else looks good!
Cheers!
If you want to stop the page to be scrollable, you can use a click listener on your button which would trigger either the disableScroll(); function respectively enableScroll(); function:
function preventDefault(event) {
event.preventDefault();
}
// 🍓 modern Chrome requires { passive: false } when adding event
let supportsPassive = false;
try {
window.addEventListener(
"test",
null,
Object.defineProperty({}, "passive", {
get: function () {
supportsPassive = true;
}
})
);
} catch (err) {}
// 🍆 check for passive support
let wheelOpt = supportsPassive ? { passive: false } : false;
let wheelEvent =
"onwheel" in document.createElement("div") ? "wheel" : "mousewheel";
// 🍋 call disableScroll() to disable scroll
function disableScroll() {
window.addEventListener("DOMMouseScroll", preventDefault, false); // older FF
window.addEventListener(wheelEvent, preventDefault, wheelOpt); // modern desktop
window.addEventListener("touchmove", preventDefault, wheelOpt); // mobile
}
// 🍊 call enableScroll() to enable scroll
function enableScroll() {
window.removeEventListener("DOMMouseScroll", preventDefault, false);
window.removeEventListener(wheelEvent, preventDefault, wheelOpt);
window.removeEventListener("touchmove", preventDefault, wheelOpt);
}
Yes indeed, I see that the class name of the button is changed. From “mopen” to “mopen w-inline-block”. So I changed the name in the code but for some reason it’s still not working
Weird! Can you put the published link so I can take a look?
Try to put it with the dash like “mopen-w-inline-block”
Sure, here you go: https://kr8werk-website.webflow.io/old-home
Thanks for your time Ricardo!
Sorry man! Cant see whats the problem! Hope other experts can help here! Maybe @PixelGeek as that code is from one of his tutorials!
Cheers!
@bram_Kr8werk, try add the id open-button
to your open button and the id of close-button
to your close button. When the id are set, add the following script, hope that helps.
document.addEventListener("DOMContentLoaded", () => {
menu();
});
function menu() {
const openButton = document.getElementById("open-button"),
closeButton = document.getElementById("close-button");
// if open button is clicked, disable scroll
openButton.addEventListener("click", () => {
disableScroll();
});
// if close button clicked, enable scroll
closeButton.addEventListener("click", () => {
enableScroll();
});
function preventDefault(event) {
event.preventDefault();
}
// 🍓 modern Chrome requires { passive: false } when adding event
let supportsPassive = false;
try {
window.addEventListener(
"test",
null,
Object.defineProperty({}, "passive", {
get: function () {
supportsPassive = true;
}
})
);
} catch (err) {}
// 🍆 check for passive support
let wheelOpt = supportsPassive ? { passive: false } : false;
let wheelEvent =
"onwheel" in document.createElement("div") ? "wheel" : "mousewheel";
// 🍋 call disableScroll() to disable scroll
function disableScroll() {
window.addEventListener("DOMMouseScroll", preventDefault, false); // older FF
window.addEventListener(wheelEvent, preventDefault, wheelOpt); // modern desktop
window.addEventListener("touchmove", preventDefault, wheelOpt); // mobile
}
// 🍊 call enableScroll() to enable scroll
function enableScroll() {
window.removeEventListener("DOMMouseScroll", preventDefault, false);
window.removeEventListener(wheelEvent, preventDefault, wheelOpt);
window.removeEventListener("touchmove", preventDefault, wheelOpt);
}
}
Hi Anthony,
Thanks for helping, I added the script code. But it’s not working:(
You can check the live verison: https://kr8werk-website.webflow.io/old-home
Hi @bram_Kr8werk,
You did not correctly implemented the Google Tag manager noscript tag - you did not closed it correctly as you wrote some kind of arrow instead of -->
therefore the code below does not work properly as seen in the devtool console error: Uncaught SyntaxError: Unexpected end of input
Simply close the noscript tag of your google tag manager and you should be good to go.
EDIT:
also, the noscript tag should be in the body and the google tag manager should be in the header. Right now, those two are inverted and may not work properly. here is the full video guide on how to install it properly. bellow is a screenshot from the video:
Hope that helps
Damn Thanks Anthony, that was the problem.
I was already thinking that after I added the tag manager something was going wrong. But couldn’t find it.
Thanks so much for your time and good explaination of how I can fix it.