科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

    最新消息：雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客
    你的位置： 首页>programmer>javascript - How to disable scroll on body when fullscreen menu open - Stack Overflow

    javascript - How to disable scroll on body when fullscreen menu open - Stack Overflow

    programmeradmin1浏览0评论

    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>

    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>

    • javascript
    • jquery
    • css
    Share Improve this question edited Jun 28, 2020 at 10:06 gjjr asked Jun 28, 2020 at 9:57 gjjrgjjr 5691 gold badge6 silver badges20 bronze badges 1
    • Add overflow: hidden on body? When menu is opened – Kiran Shinde Commented Jun 28, 2020 at 10:13
    Add a ment  | 

    2 Answers 2

    Reset to default 2

    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.

    modify this class with this property

    [id="main-navigation-toggle"] ~ label {
cursor: pointer;
position: absolute;
right: 2rem;
top: 0rem;
z-index: 100;

    }

    right value is changed, i tried this or if you want disable scroll

    body{
    overflow: hidden;
}

    与本文相关的文章

    发布评论

    评论列表(0)

    1. 暂无评论