当我打开主菜单时，我基本上是在尝试禁止主体滚动。我希望有一个没有JS的解决方案，因为我不太熟悉它，但不介意提供一些帮助。
这是我的代码笔，只使用CSS。正如你所看到的，当菜单打开时，背景中的主体仍然可以滚动。我需要禁用滚动，但仍然可以在菜单中滚动。提前感谢！
Codepen
/* 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;
}
这里有一种不用js的破解方法。我所做的是为您的整个内容制作一个容器div，并给它一个类.contentWrap，然后我将此代码添加到您的CSS:中
.main-menu:target ~ .contentWrap{
height: 80vh; overflow: hidden;
}
这样做的目的是让你的整个内容的高度尽量在80vh以内，然后将溢出设置为隐藏，这样就可以删除滚动条。
同样，这是一种破解方法，因此滚动可能适用于一些形状怪异的屏幕大小(如Stack Overflow上的代码预览(，但应该适用于大多数屏幕大小。
看看：
https://jsfiddle.net/0mcpon8a/
/* 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;
}
}
.main-menu:target ~ .contentWrap{
height: 80vh; overflow: hidden;
}<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>
<div class="contentWrap">
<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>
</div>