Menu
I've created a scrolling modal window that requires overflow: hidden to be applied to the body, when the modal is open, to prevent the body from scrolling. However, overflow: hidden causes my body to jump up to the top of the page. Why is this is how do I prevent this from happening?
edit: Here is the css for my <body>:
body {
margin: 0 !important;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
font-smoothing: subpixel-antialiased;
font-smooth: always;
text-rendering: optimizeLegibility;
text-shadow: 0 0 0 transparent;
color: white;
font-family: "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
font-size: 1em;
line-height: 1.5;
}
Here is the css for my modal window:
.menu {
opacity: 0;
display: none;
color: white;
overflow: hidden;
position: absolute;
z-index: 10;
height: 100%;
width: 100%;
top: 0;
left: 0;
}
.menu .options {
overflow-y: scroll;
height: 100%;
width: 100%;
text-align: center;
top: 0;
padding: 120px 0;
position: fixed;
z-index: 2;
}
.menu .menu_bg {
background-color: #b4f0b4;
height: 100%;
width: 100%;
position: fixed;
z-index: 1;
}
and here is the HTML for my modal window:
<div class="menu">
<div class="options"></div>
<div class="menu_bg"></div>
</div>
857
In short: if you use width: 100vw on a page that has a vertical scrollbar you end up with a horizontal overflow. The easy fix is to use width: 100% instead. Percentages don't include the width of the scrollbar, so will automatically fit.
To hide the horizontal scrollbar and prevent horizontal scrolling, use overflow-x: hidden: HTML. CSS.
You can force the content of the HTML <div> element stay on the same line by using a little CSS. Use the overflow property, as well as the white-space property set to “nowrap”.
overflow: hiddenWith the hidden value, the overflow is clipped, and the rest of the content is hidden: You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element's box.
Your body is probably in height: 100%, just add height: auto at the same time you add overflow: hidden and it should be ok.
182
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
