Search code examples
cssgoogle-chromescrollscrollbaroverflow

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:

html,
body {
  overflow-y: hidden;
}

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

.step {
  position: relative;
  height: 500px;
  margin-bottom: 500px;
}
<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>

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

Thanks!

Solution

  • 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;
}