CODEWITHSUNDEEP
javascripthtmlcss
Victor
Victor

Reputation: 29

How to prevent page scroll to the top while menu opened

There is a menu button on the page. When a user taps the button full-page menu opens. There is a problem - the main content page automatically scrolls to the top. Could you advise me on how to prevent it? I've already checked a similar question here How to disable scrolling in the background when the mobile menu is open?, but nor position:fixed or oveflow:hidden helped

const menuOpen = document.querySelector('.menu-open');
const menuClose = document.querySelector('.menu-close');
const body = document.querySelector('.root');

function lockScroll() {
    body.classList.add('lock');
}

function unLockScroll() {
    body.classList.remove('lock');
}

menuOpen.addEventListener('click', lockScroll);
menuClose.addEventListener('click', unLockScroll);
.lock {
  position: fixed;
  height: 100vh;
  overflow-y: hidden;
}

.menu-open {
  position: fixed;
  top: 0;
  right: 0;
  cursor: pointer;
  transition: all ease 0.6s;
  border: 0;
  background: none;
  padding: 1rem 1rem 2rem 2rem;
}

.nav-container {
  position: absolute;
  left: -100%;
  width: 100%;
  height: 100vh;
  background: #f5f5f1;
  z-index: 5;
}
<header class="header">
            <button type="button" class="menu-open"><img src="./images/menu.svg" alt=""></button>
            <div class="nav-container">
                <button type="button" class="menu-close"><img src="./images/close.svg" alt=""></button>
                <div class="menu__wrapper">
                    <div class="socials">
                        <img src="./images/logo.png" alt="" class="logo" title="">
                    </div>
                    <nav class="menu">
                        <div class="menu__item">
                            <a class="menu__item-link">menu</a>
                        </div>
                        <div class="menu__item">
                            <a class="menu__item-link">menu</a>
                        </div>
                        <div class="menu__item">
                            <a href="#males" class="menu__item-link">menu</a>
                        </div>
                        <div class="menu__item">
                            <a class="menu__item-link">menu</a>
                        </div>
                        <div class="menu__item">
                            <a class="menu__item-link">menu</a>
                        </div>
                    </nav>
                </div>
            </div>
        </header>

doesn't help.

Upvotes: 0

Views: 1630

Answers (2)

lukaspod
lukaspod

Reputation: 34

In my experience (mostly WordPress), event.preventDefault(); does the trick. You basically override the default behavior when clicking a link - which opens a page on the top.

Used in this way:

const menuOpenable = document.querySelectorAll(".menu-item-has-children");

menuOpenable.forEach((menuItem) =>
  menuItem.addEventListener("click", (event) => {
    const subMenu = event.target.parentElement.querySelector(".sub-menu");
    subMenu.classList.toggle("sub-menu--open");

    event.preventDefault(); // <-- Here
  })
);

Upvotes: 0

Sven Folkerts
Sven Folkerts

Reputation: 107

I think your main body elements are positioned static (or relative if defined?), untill you change it by overriding with position fixed.

A better behaviour would be to leave your nav container be positioned absolute on "menuOpen" and leave the remainder of elements in their already defined flow so your full screen simply overlay's the rest of the elements.

Upvotes: 2

Related Questions