菜单打开时如何在主体（背景）中禁用滚动？

Question

I'm basically trying to disable the main body from scrolling when I have the main menu open. I'm hoping there's a solution without JS as I'm not too familiar with it, but don't mind with some help.

Here is my codepen, only using CSS. As you can see, the body in the background is still able to scroll when the menu is open. I need to disable that scrolling, but still be able to scroll within the menu itself. Thanks in advance!

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>

Answer 1

I use JS. Just toggle a 'noscroll' class on the html tag when the menu opens/closes.

  document.querySelector('html').classList.add('noscroll');
  document.querySelector('html').classList.remove('noscroll');

html.noscroll {
    overflow: hidden;
}
html.noscroll body {
    overflow: hidden;
}

Answer 2

Here's a hack kind of way to do it without js. What I did was I made a container div for your entire content and gave it a class .contentWrap I then added this code to your CSS:

.main-menu:target ~ .contentWrap{ 
height: 80vh; overflow: hidden;
}

What this does is it'll make the height of your entire content try to fit within 80vh and then set the overflow to hidden so it removes the scroll bar.

Again this is kind of a hack way to do it so the scroll might be there for some weirdly shaped screen sizes (like the preview of the code here on Stack Overflow) but should work for most screen sizes.

Check it out:

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>