如何在全屏菜单打开时禁用身体滚动 [英] How to disable scroll on body when fullscreen menu open

问题描述

谁能告诉我如何在打开全屏菜单时禁用滚动?下面的代码是我目前拥有的.我需要在菜单打开时禁用桌面和移动设备上的滚动，因为此时您可以在打开菜单时滚动，并且在您关闭菜单时会不知不觉地在页面的不同部分结束.

:root {--color-secondary: #75757C;--color-dark: #364C62;--颜色光:#F5F5F5；--td: 150ms;--te: 立方贝塞尔曲线 (0.215, 0.61, 0.355, 1);}.page-container >* + * {边距顶部:1.5rem；}.navigation-container {位置:相对；}.nav-main {对齐项目:居中；显示:弹性；高度:100%；对齐内容:居中；左:-100%；位置:固定；转换:左0s calc(var(--td) * 2)，变换0s calc(var(--td) * 2);宽度:100%；z-索引:99；}.nav-main::before, .nav-main::after {内容: '';背景色:#0e0e0e；高度:100%；左:0；位置:绝对；变换:translateX(-110%);变换原点:0 50%；转换:转换 calc(var(--td) * 2) var(--td) var(--te);宽度:100%；z-索引:-100；}.nav-main::before {顶部:-7%；}.nav-main::after {底部:0；}.nav-main .menu__item {不透明度:0；变换:translateX(-1rem);过渡:不透明度 var(--td) var(--te)，变换 var(--td) var(--te)；}[id="main-navigation-toggle"] {不透明度:0；位置:固定；顶部:-100%；}[id="main-navigation-toggle"] ~ 标签 {光标:指针；位置:绝对；右:0rem；顶部:0rem；z-索引:100；}[id="main-navigation-toggle"] ~ 标签跨度 {显示:块；高度:125px；填充:0rem；位置:相对；转换:转换 calc(var(--td) * 3) var(--te);宽度:2.7rem；}[id="main-navigation-toggle"] ~ label span::before, [id="main-navigation-toggle"] ~ label span::after {背景颜色:#FB4D98；底部:0；内容: '';高度:5px；左:0；保证金:自动；位置:绝对；右:0；转换:转换 calc(var(--td) * 3) var(--te);顶部:0；宽度:计算(100% - 1rem)；}@media 屏幕和(最大宽度:768px){[id="main-navigation-toggle"] {不透明度:0；位置:固定；顶部:-100%；}[id="main-navigation-toggle"] ~ 标签 {光标:指针；位置:绝对；z-索引:100；}[id="main-navigation-toggle"] ~ 标签跨度 {显示:块；高度:27px；右:-8px；填充:0.5rem；位置:相对；转换:转换 calc(var(--td) * 3) var(--te);宽度:2.7rem；}[id="main-navigation-toggle"] ~ label span::before, [id="main-navigation-toggle"] ~ label span::after {背景颜色:#FB4D98；底部:0；内容: '';高度:5px；左:0；保证金:自动；位置:绝对；右:0；转换:转换 calc(var(--td) * 3) var(--te);顶部:0；宽度:计算(100% - 1rem)；}}[id="main-navigation-toggle"] ~ 标签跨度::before {变换:旋转(0)translateY(-100％)；}[id="main-navigation-toggle"] ~ 标签跨度::after {变换:旋转(0)translateY(100％)；}[id="main-navigation-toggle"]:checked ~ label span {变换:旋转(1转)；}[id="main-navigation-toggle"]:checked ~ label span::before {变换:旋转(45度)；}[id="main-navigation-toggle"]:checked ~ label span::after {变换:旋转(-45度)；}[id="main-navigation-toggle"]:checked ~ .nav-main {左:0；转换:转换0s；}[id="main-navigation-toggle"]:checked ~ .nav-main::before, [id="main-navigation-toggle"]:checked ~ .nav-main::after {变换:translateX(0);转换延迟:0s；}[id="main-navigation-toggle"]:checked ~ .nav-main::after {转换延迟: calc(var(--td)/0);}[id="main-navigation-toggle"]:checked ~ .nav-main .menu__item {不透明度:1；变换:translateX(0);过渡:不透明度 calc(var(--td) * 2) var(--te)，变换 calc(var(--td) * 2) var(--te);}[id="main-navigation-toggle"]:checked ~ .nav-main .menu__item:nth-child(1) {转换延迟:calc(var(--td) * 2 * (1 * 0.25));z-索引:-1；}[id="main-navigation-toggle"]:checked ~ .nav-main .menu__item:nth-child(2) {转换延迟:calc(var(--td) * 2 * (2 * 0.25));z-索引:-2；}[id="main-navigation-toggle"]:checked ~ .nav-main .menu__item:nth-child(3) {转换延迟:calc(var(--td) * 2 * (3 * 0.25));z-索引:-3；}[id="main-navigation-toggle"]:checked ~ .nav-main .menu__item:nth-child(4) {转换延迟:calc(var(--td) * 2 * (4 * 0.25));z-索引:-4；}[id="main-navigation-toggle"]:checked ~ .nav-main .menu__item:nth-child(5) {转换延迟:calc(var(--td) * 2 * (5 * 0.25));z-索引:-5；}.菜单 {位置:相对；文本对齐:居中；z-索引:1；}.menu >.menu__item {字体系列:联盟！重要；字体大小:10vmin；文本转换:大写；}@media only screen and (max-width: 600px) {.菜单 {位置:相对；文本对齐:居中；保证金最高:-7%；z-索引:1；}}.子菜单{左:0；不透明度:0；位置:绝对；变换:translateY(-10%);顶部:100%；宽度:100%；可见性:隐藏；z-索引:2；}.submenu .menu__item {字体系列:var(--font-family-primary);字体大小:3.5vmin；宽度:100%；}.submenu .menu__link {颜色:var(--color-secondary);文本阴影:1px 1px 0 var(--color-primary), 2px 2px 0 var(--color-primary);}.submenu .menu__link::before, .submenu .menu__link::after {显示:无；}.menu__item {显示:块；位置:相对；}.menu__item:hover .menu__link::before, .menu__item:hover .menu__link::after {动画:闪烁 1s var(--td) steps(1, end) 向前无限；变换:translateX(calc(100% - 0.5rem));转换持续时间:calc(var(--td) * 3);}.menu__item:hover .menu__link::after {转换延迟: calc(var(--td)/2);}.menu__item:悬停 .submenu {不透明度:1；变换:translateY(0);转换:转换 calc(var(--td) * 2) calc(var(--td) * 3) var(--te)，不透明度 calc(var(--td) * 2) calc(var(--td) * 3) var(--te), 可见性 0s calc(var(--td) * 3);可见性:可见；}.menu__link {颜色:#F4FB82；显示:内联块；字体粗细:正常；溢出:隐藏；填充:0.5rem 1rem 0.125rem；位置:相对；文字装饰:无；过渡:颜色 var(--td) var(--te)，不透明度 var(--td) var(--te)，变换 var(--td) var(--te)；z-索引:1；}.menu__link::before, .menu__link::after {内容: '';背景色:#fb4d98；高度:50%；左:0；位置:绝对；变换:translateX(-110%);变换原点:0 50%；转换:转换 0s var(--te);宽度:100%；z-索引:-1；}.menu__link::before {顶部:0；}.menu__link::after {底部:0；}.menu:not(:focus-within):not(:hover) .menu__item .menu__link {不透明度:1；变换:翻译(0, 0)；}.menu__item {--拉:30%；}.menu__item .menu__link {不透明度:0.25；转换持续时间:calc(var(--td) * 3);转换:translate(0, calc(var(--pull) * -1));}.menu__item .submenu .menu__link {不透明度:1；}.menu__item:hover >.menu__link {颜色:#fb4d98；不透明度:1；变换:翻译(0, 0)；}.menu__item:hover >.menu__link:悬停{颜色:var(--color-light);转换延迟:0s；}.menu__item:hover ~ .menu__item >.menu__link {转换持续时间:calc(var(--td) * 3);变换:translate(0, var(--pull));}@keyframes 闪烁 {50%, 100% {不透明度:0；}}

<input type="checkbox" id="main-navigation-toggle" class="btn btn--close" title="切换主导航"/><label for="main-navigation-toggle"><span></span><nav id="main-navigation" class="nav-main"><ul class="菜单"><li class="menu__item"><a class="menu__link" href="#0">首页</a><li class="menu__item"><a class="menu__link" href="#0">关于</a><li class="menu__item"><a class="menu__link" href="#0">项目</a><li class="menu__item"><a class="menu__link" href="#0">联系方式</a></nav>

解决方案

我相信您想启用 &在切换菜单按钮时禁用页面滚动.您可以使用 jQuery 来实现这一点:

$('input[id="main-navigation-toggle"]').on('change',function(e) {如果 ($(this).prop('checked')) {$('body').css('溢出', '隐藏');} 别的 {$('body').css('overflow', 'auto');};});

这段代码的作用是检查你提供的带有 id = main-navigation-toggle 的复选框输入是否被选中，如果它被选中了 overflowbody 元素的 CSS 属性将被设置为 hidden，如果它没有被选中，那么 overflow 属性将被设置为 auto，这意味着滚动是关闭菜单时再次启用.

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>

解决方案

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.

这篇关于如何在全屏菜单打开时禁用身体滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！