Cécile Boucheron Cécile Boucheron - 4 months ago 19
CSS Question

Body set to overflow-y:hidden but page is still scrollable in Chrome

I'm having an issue with the overflow-y property in Chrome.
Even though I've set it to hidden, I can still scroll the page with the mouse wheel.

Here is my code:

<body>
<div id="content">
<div class="step">this is the 1st step</div>
<div class="step">this is the 2nd step</div>
<div class="step">this is the 3rd step</div>
</div>
</body>

html, body {
overflow-y:hidden;
}

#content {
position:absolute;
width:100%;
}

.step {
position:relative;
height:500px;
margin-bottom:500px;
}


Does anybody know how to block the vertical scrolling in Chrome?

Thanks!

Answer

I finally found a way to fix the issue so I'm answering here.

I set the overflow-y on the #content instead, and wrapped my steps in another div. It works.

Here is the final code:

<body>
  <div id="content">
    <div id="steps">
       <div class="step">this is the 1st step</div>
       <div class="step">this is the 2nd step</div>
       <div class="step">this is the 3rd step</div>
     </div>
   </div>
</body>

#content {
  position:absolute;
  width:100%;
  overflow-y:hidden;
  top:0;
  bottom:0;
}
.step {
  position:relative;
  height:500px;
  margin-bottom:500px;
}