â–Ľ
Streaming live at 10am (PST)

Full screen menu, page is scrolling

Design help Custom code
#1

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

#2

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!

#3

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);
}
#4

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

#5

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”

#6

Sure, here you go: https://kr8werk-website.webflow.io/old-home

Thanks for your time Ricardo!

#7

Sorry man! Cant see whats the problem! :confused: Hope other experts can help here! Maybe @PixelGeek as that code is from one of his tutorials!

Cheers!

1 Like
#8

@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);
  }
}
1 Like
#9

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

#10

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.

Screenshot (2444)
Screenshot (2444)1920Ă—1080 498 KB

Screenshot (2446)
Screenshot (2446)1920Ă—1080 223 KB

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:

Screenshot (2445)
Screenshot (2445)1920Ă—1080 227 KB

Hope that helps

#11

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.

1 Like