juliancorp
Reputation: 35
How to disable scrolling in the main body (background) when menu is open?
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!
/* 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>Upvotes: 0
Views: 269
Answers (2)
John
Reputation: 5337
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>Upvotes: 0
Marc
Reputation: 1740
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;
}
Upvotes: 2
Related Questions
- How to disable scrolling in the background when the mobile menu is open?
- Keep scroll visible but disable when nav menu open
- How to prevent body from scrolling with Responsive menu
- How to prevent body from scrolling with push-side menu
- How to disable scroll on body when fullscreen menu open
- How to stop body scroll if open menu in mobile?
- Prevent scroll when open menu
- How to disable the body scroll in the navigation overlay and enable it in the body?
- how to stop menu when you stop scrolling
- Disable scrolling when menu is triggered