Question

6

How to disable scroll on body when fullscreen menu open

rated 0 times [ 8] [ 2] / answers: 1 / hits: 8918 / 4 Years ago, sun, june 28, 2020, 12:00:00

Can anyone tell me how to disable scrolling when you open a fullscreen menu? The below code is what i currently have. I need to disable scrolling on desktop and mobile while the menu is open as at the moment you can scroll when its open, and will unknowingly end up on a different part of the page when you close the menu.

:root {

  --color-secondary: #75757C;

  --color-dark: #364C62;

  --color-light: #F5F5F5;

  --td: 150ms;

  --te: cubic-bezier(0.215, 0.61, 0.355, 1);

}





.page-container > * + * {

  margin-top: 1.5rem;

}

 

.navigation-container {

  position: relative;

}



.nav-main {

  align-items: center;

  display: flex;

  height: 100%;

  justify-content: center;

  left: -100%;

  position: fixed;

  transition: left 0s calc(var(--td) * 2), transform 0s calc(var(--td) * 2);

  width: 100%;

  z-index: 99;

}



.nav-main::before, .nav-main::after {

  content: '';

  background-color: #0e0e0e;

  height: 100%;

  left: 0;

  position: absolute;

  transform: translateX(-110%);

  transform-origin: 0 50%;

  transition: transform calc(var(--td) * 2) var(--td) var(--te);

  width: 100%;

  z-index: -100;

}

.nav-main::before {

  top: -7%;

}

.nav-main::after {

  bottom: 0;

}

.nav-main .menu__item {

  opacity: 0;

  transform: translateX(-1rem);

  transition: opacity var(--td) var(--te), transform var(--td) var(--te);

}



[id=main-navigation-toggle] {

  opacity: 0;

  position: fixed;

  top: -100%;

}

[id=main-navigation-toggle] ~ label {

  cursor: pointer;

  position: absolute;

  right: 0rem;

  top: 0rem;

  z-index: 100;

}

[id=main-navigation-toggle] ~ label span {

  display: block;

  height: 125px;

  padding: 0rem;

  position: relative;

  transition: transform calc(var(--td) * 3) var(--te);

  width: 2.7rem;

}

[id=main-navigation-toggle] ~ label span::before, [id=main-navigation-toggle] ~ label span::after {

  background-color: #FB4D98;

  bottom: 0;

  content: '';

  height: 5px;

  left: 0;

  margin: auto;

  position: absolute;

  right: 0;

  transition: transform calc(var(--td) * 3) var(--te);

  top: 0;

  width: calc(100% - 1rem);

}



@media screen and (max-width: 768px) {

    



[id=main-navigation-toggle] {

  opacity: 0;

  position: fixed;

  top: -100%;

}

[id=main-navigation-toggle] ~ label {

  cursor: pointer;

  position: absolute;

  z-index: 100;

}

[id=main-navigation-toggle] ~ label span {

  display: block;

  height: 27px;

  right: -8px;

  padding: 0.5rem;

  position: relative;

  transition: transform calc(var(--td) * 3) var(--te);

  width: 2.7rem;

}

[id=main-navigation-toggle] ~ label span::before, [id=main-navigation-toggle] ~ label span::after {

  background-color: #FB4D98;

  bottom: 0;

  content: '';

  height: 5px;

  left: 0;

  margin: auto;

  position: absolute;

  right: 0;

  transition: transform calc(var(--td) * 3) var(--te);

  top: 0;

  width: calc(100% - 1rem);

}

}



[id=main-navigation-toggle] ~ label span::before {

  transform: rotate(0) translateY(-100%);

}

[id=main-navigation-toggle] ~ label span::after {

  transform: rotate(0) translateY(100%);

}

[id=main-navigation-toggle]:checked ~ label span {

  transform: rotate(1turn);

}

[id=main-navigation-toggle]:checked ~ label span::before {

  transform: rotate(45deg);

}

[id=main-navigation-toggle]:checked ~ label span::after {

  transform: rotate(-45deg);

}

[id=main-navigation-toggle]:checked ~ .nav-main {

  left: 0;

  transition: transform 0s;

}

[id=main-navigation-toggle]:checked ~ .nav-main::before, [id=main-navigation-toggle]:checked ~ .nav-main::after {

  transform: translateX(0);

  transition-delay: 0s;

}

[id=main-navigation-toggle]:checked ~ .nav-main::after {

  transition-delay: calc(var(--td) / 0);

}

[id=main-navigation-toggle]:checked ~ .nav-main .menu__item {

  opacity: 1;

  transform: translateX(0);

  transition: opacity calc(var(--td) * 2) var(--te), transform calc(var(--td) * 2) var(--te);

}

[id=main-navigation-toggle]:checked ~ .nav-main .menu__item:nth-child(1) {

  transition-delay: calc(var(--td) * 2 * (1 * 0.25));

  z-index: -1;

}

[id=main-navigation-toggle]:checked ~ .nav-main .menu__item:nth-child(2) {

  transition-delay: calc(var(--td) * 2 * (2 * 0.25));

  z-index: -2;

}

[id=main-navigation-toggle]:checked ~ .nav-main .menu__item:nth-child(3) {

  transition-delay: calc(var(--td) * 2 * (3 * 0.25));

  z-index: -3;

}

[id=main-navigation-toggle]:checked ~ .nav-main .menu__item:nth-child(4) {

  transition-delay: calc(var(--td) * 2 * (4 * 0.25));

  z-index: -4;

}

[id=main-navigation-toggle]:checked ~ .nav-main .menu__item:nth-child(5) {

  transition-delay: calc(var(--td) * 2 * (5 * 0.25));

  z-index: -5;

}

.menu {

  position: relative;

  text-align: center;

  z-index: 1;

}

.menu > .menu__item {

  font-family: alliance !important;

  font-size: 10vmin;

  text-transform: uppercase;

}

@media only screen and (max-width: 600px) {

    .menu {

  position: relative;

  text-align: center;

  margin-top:-7%;

  z-index: 1;

}

}

.submenu {

  left: 0;

  opacity: 0;

  position: absolute;

  transform: translateY(-10%);

  top: 100%;

  width: 100%;

  visibility: hidden;

  z-index: 2;

}

.submenu .menu__item {

  font-family: var(--font-family-primary);

  font-size: 3.5vmin;

  width: 100%;

}

.submenu .menu__link {

  color: var(--color-secondary);

  text-shadow: 1px 1px 0 var(--color-primary), 2px 2px 0 var(--color-primary);

}

.submenu .menu__link::before, .submenu .menu__link::after {

  display: none;

}

.menu__item {

  display: block;

  position: relative;

}

.menu__item:hover .menu__link::before, .menu__item:hover .menu__link::after {

  animation: blink 1s var(--td) steps(1, end) forwards infinite;

  transform: translateX(calc(100% - 0.5rem));

  transition-duration: calc(var(--td) * 3);

}

.menu__item:hover .menu__link::after {

  transition-delay: calc(var(--td) / 2);

}

.menu__item:hover .submenu {

  opacity: 1;

  transform: translateY(0);

  transition: transform calc(var(--td) * 2) calc(var(--td) * 3) var(--te), opacity calc(var(--td) * 2) calc(var(--td) * 3) var(--te), visibility 0s calc(var(--td) * 3);

  visibility: visible;

}

.menu__link {

  color: #F4FB82;

  display: inline-block;

  font-weight: normal;

  overflow: hidden;

  padding: 0.5rem 1rem 0.125rem;

  position: relative;

  text-decoration: none;

  transition: color var(--td) var(--te), opacity var(--td) var(--te), transform var(--td) var(--te);

  z-index: 1;

}

.menu__link::before, .menu__link::after {

  content: '';

  background-color: #fb4d98;

  height: 50%;

  left: 0;

  position: absolute;

  transform: translateX(-110%);

  transform-origin: 0 50%;

  transition: transform 0s var(--te);

  width: 100%;

  z-index: -1;

}

.menu__link::before {

  top: 0;

}

.menu__link::after {

  bottom: 0;

}

.menu:not(:focus-within):not(:hover) .menu__item .menu__link {

  opacity: 1;

  transform: translate(0, 0);

}

.menu__item {

  --pull: 30%;

}

.menu__item .menu__link {

  opacity: 0.25;

  transition-duration: calc(var(--td) * 3);

  transform: translate(0, calc(var(--pull) * -1));

}

.menu__item .submenu .menu__link {

  opacity: 1;

}

.menu__item:hover > .menu__link {

  color: #fb4d98;

  opacity: 1;

  transform: translate(0, 0);

}

.menu__item:hover > .menu__link:hover {

  color: var(--color-light);

  transition-delay: 0s;

}

.menu__item:hover ~ .menu__item > .menu__link {

  transition-duration: calc(var(--td) * 3);

  transform: translate(0, var(--pull));

}

@keyframes blink {

  50%, 100% {

    opacity: 0;

  }

}

<div class=navigation-container>

<input type=checkbox id=main-navigation-toggle class=btn btn--close title=Toggle main navigation />

<label for=main-navigation-toggle>

  <span></span>

</label>



<nav id=main-navigation class=nav-main>

  <ul class=menu>

    <li class=menu__item>

      <a class=menu__link href=#0>Home</a>

    </li>

    <li class=menu__item>

      <a class=menu__link href=#0>About</a>

    </li>

    <li class=menu__item>

      <a class=menu__link href=#0>Projects</a>

   

</li>

    <li class=menu__item>

      <a class=menu__link href=#0>Contact</a>

    </li>

  </ul>

</nav>

</div>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

stephonkeandrer

Add To Favorites

Follow

Total Points: 392

Total Questions: 94

Total Answers: 100

Location: Tajikistan

Member since Sun, Aug 29, 2021

3 Years ago

stephonkeandrer questions

1 Electron: how to open an url in the same window and after the user do some action go back to application in the same window

Thu, Mar 24, 22, 00:00, 2 Years ago

1 How databind a textarea component text value and update it?

Tue, Jun 9, 20, 00:00, 4 Years ago

1 Angular; how to re-render component data when I update variable in script. Binding data is working, but not updating

Mon, May 4, 20, 00:00, 4 Years ago

1 Loading module was blocked because of a disallowed MIME type (“application/wasm”)

Sun, Oct 13, 19, 00:00, 5 Years ago

1 How can I tell react-native what .env file to look at?

Mon, Aug 12, 19, 00:00, 5 Years ago

View All

answered 4 Years ago asalewisc · Accepted Answer

I believe you want to enable & disable the scrolling of the page on the toggling of menu button. You can achieve this by using jQuery:

$('input[id="main-navigation-toggle"]').on('change',function(e) {

if ($(this).prop('checked')) {

    $('body').css('overflow', 'hidden');

} else {

    $('body').css('overflow', 'auto');

};

});

What this code will do is to check if the checkbox input with id = main-navigation-toggle you have provided is checked or not, if it's checked the overflow CSS property of body element will be set as hidden and if it's not checked then the overflow property will be set as auto which means the scrolling is enabled again when the menu is closed.