javascript - 菜单打开时如何在主体（背景）中禁用滚动？
问题描述
当我打开主菜单时，我基本上是在尝试禁用主体滚动。我希望有一个没有 JS 的解决方案，因为我不太熟悉它，但不介意一些帮助。
这是我的代码笔，仅使用 CSS。如您所见，当菜单打开时，后台的正文仍然可以滚动。我需要禁用该滚动，但仍然能够在菜单本身内滚动。提前致谢！
/* Screen reader only */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}
/* Button styling */
.menu-toggle {
display: inline-block;
padding: .75em 15px;
line-height: 1em;
font-size: 1em;
color: #333;
}
.menu-toggle:hover,
.menu-toggle:focus {
color: #c00;
}
/*
Default styles + Mobile first
Offscreen menu style
*/
.main-menu {
position: absolute;
display: none;
left: -200px;
top: 0;
height: 100%;
overflow-y: scroll;
overflow-x: visible;
transition: left 0.3s ease,
box-shadow 0.3s ease;
z-index: 999;
}
.main-menu ul {
list-style: none;
margin: 0;
padding: 2.5em 0 0;
/* Hide shadow w/ -8px while 'closed' */
-webkit-box-shadow: -8px 0 8px rgba(0,0,0,.5);
-moz-box-shadow: -8px 0 8px rgba(0,0,0,.5);
box-shadow: -8px 0 8px rgba(0,0,0,.5);
min-height: 100%;
width: 200px;
background: #1a1a1a;
}
.main-menu a {
display: block;
padding: .75em 15px;
line-height: 1em;
font-size: 1em;
color: #fff;
text-decoration: none;
border-bottom: 1px solid #383838;
}
.main-menu li:first-child a {
border-top: 1px solid #383838;
}
.main-menu a:hover,
.main-menu a:focus {
background: #333;
text-decoration: underline;
}
.main-menu .menu-close {
position: absolute;
right: 0;
top: 0;
}
/*
On small devices, allow it to toggle...
*/
/*
:target for non-JavaScript
[aria-expanded] will be used if/when JavaScript is added to improve interaction, though it's completely optional.
*/
.main-menu:target,
.main-menu[aria-expanded="true"] {
display: block;
left: 0;
outline: none;
-moz-box-shadow: 3px 0 12px rgba(0,0,0,.25);
-webkit-box-shadow: 3px 0 12px rgba(0,0,0,.25);
box-shadow: 3px 0 12px rgba(0,0,0,.25);
}
.main-menu:target .menu-close,
.main-menu[aria-expanded="true"] .menu-close {
z-index: 1001;
}
.main-menu:target ul,
.main-menu[aria-expanded="true"] ul {
position: relative;
z-index: 1000;
}
/*
We could us `.main-menu:target:after`, but
it wouldn't be clickable.
*/
.main-menu:target + .backdrop,
.main-menu[aria-expanded="true"] + .backdrop{
position: absolute;
display: block;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 998;
background: #000;
background: rgba(0,0,0,.85);
cursor: default;
}
@supports (position: fixed) {
.main-menu,
.main-menu:target + .backdrop,
.main-menu[aria-expanded="true"] + .backdrop{
position: fixed;
}
}
/*
Larger screen styling
Horizontal menu
*/
{
.menu-toggle,
.main-menu .menu-close {
display: none;
}
/* Undo positioning of off-canvas menu */
.main-menu {
position: relative;
left: auto;
top: auto;
height: auto;
display: block;
}
.main-menu ul {
display: flex;
/* Undo off-canvas styling */
padding: 0;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
height: auto;
width: auto;
background: none;
}
.main-menu a {
color: #06c;
border: 0 !important; /* Remove borders from off-canvas styling */
}
.main-menu a:hover,
.main-menu a:focus {
background: none; /* Remove background from off-canvas styling */
color: #c00;
}
}<a href="#main-menu"
id="main-menu-toggle"
class="menu-toggle"
aria-label="Open main menu">
<span class="sr-only">Open main menu</span>
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" ><path fill="#999999" d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/></svg>
</a>
<nav id="main-menu" class="main-menu" aria-label="Main menu">
<a href="#main-menu-toggle"
id="main-menu-close"
class="menu-close"
aria-label="Close main menu">
<span class="sr-only">Close main menu</span>
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" ><path fill="#999999" d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>
</a>
<ul>
<li><a href="#">Products</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<a href="#main-menu-toggle"
class="backdrop"
tabindex="-1"
aria-hidden="true" hidden></a>
<p>
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</p>
<p>
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</p>
<p>
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</p>
<p>
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</p>
<p>
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</p>解决方案
我用JS。html只需在菜单打开/关闭时切换标签上的“noscroll”类。
document.querySelector('html').classList.add('noscroll');
document.querySelector('html').classList.remove('noscroll');
html.noscroll {
overflow: hidden;
}
html.noscroll body {
overflow: hidden;
}
推荐阅读
- java - 我如何将文件读/写到 EDC 设备中的 usb otg？
- java - 将图像从小端转换为大端
- android - 检测recyclerview何时到达最高位置
- sql - 仅在满足特定条件时如何选择记录
- qt-creator - 在 QtCreator 中将 --enable-shared 放在哪里？
- java - 如何从我的字符串中一一检索值
- python - 将 InlineField 添加到 ClusterableModel 不起作用
- mysql - 如何使用用户输入的名称创建 MYSQL 数据库
- c# - ASP.Net core 2 - powershell 远程处理仅在 IIS Express 中有效（Kestrel 不工作）
- bootstrap-4 - Boostrap Flex：row和flex-row、flex-sm-row等有什么区别