CODEWITHSUNDEEP
cssgoogle-chromescrollscrollbaroverflow
Cécile Boucheron
Cécile Boucheron

Reputation: 659

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!

Upvotes: 32

Views: 149555

Answers (11)

Neagoe Andreas
Neagoe Andreas

Reputation: 9

body { overflow-x: hidden;}

With this, the overflow will be hidden on the x-line (horizontally) but you will be able to scroll vertically.

Upvotes: 0

Milan Meuleman
Milan Meuleman

Reputation: 1

Ok so this is the combination that worked for me when I had this problem on one of my websites:

html {
    height: 100%;
}

body {
    overflow-x: hidden;
}

Upvotes: -4

Vikas Bidhuri
Vikas Bidhuri

Reputation: 9

Find out the element which is larger than the body (element which is causing the page to scroll) and just set it's position to fixed. NOTE: I'm not talking to change the position of draggable elements. Draggable elements can be dragged out of body only when there's an element larger than body (mostly in width).

Upvotes: 0

Gagan
Gagan

Reputation: 53

Use:

overflow: hidden;
height: 100%;
position: fixed;
width: 100%;

Upvotes: 1

Maxi
Maxi

Reputation: 37

Try this when you want to "fix" your body's scroll:

jQuery('body').css('height', '100vh').css('overflow-y', 'hidden');

and this when you want to turn it normal again:

jQuery('body').css('height', '').css('overflow-y', '');

Upvotes: 1

dareapersven
dareapersven

Reputation: 71

Another solution I found to work is to set a mousewheel handler on the inside container and make sure it doesn't propagate by setting its last parameter to false and stopping the event bubble.

document.getElementById('content').addEventListener('mousewheel',function(evt){evt.cancelBubble=true;   if (evt.stopPropagation) evt.stopPropagation},false);

Scroll works fine in the inner container, but the event doesn't propagate to the body and so it does not scroll. This is in addition to setting the body properties overflow:hidden and height:100%.

Upvotes: 3

Scheintod
Scheintod

Reputation: 8115

What works for me on /FF and /Chrome:

body {

    position: fixed;
    width: 100%;
    height: 100%;

}

overflow: hidden just disables display of the scrollbars. (But you can put it in there if you like to).

There is one drawback I found: If you use this method on a page which you want only temporarily to stop scrolling, setting position: fixed will scroll it to the top. This is because position: fixed uses absolute positions which are currently set to 0/0.

This can be repaired e.g. with jQuery:

var lastTop;

function stopScrolling() {
    lastTop = $(window).scrollTop();      
    $('body').addClass( 'noscroll' )          
         .css( { top: -lastTop } )        
         ;            
}

function continueScrolling() {                    

    $('body').removeClass( 'noscroll' );      
    $(window).scrollTop( lastTop );       
}

Upvotes: 16

David
David

Reputation: 1

The correct answer is, you need to set JUST body to overflow:hidden. For whatever reason, if you also set html to overflow:hidden the result is the problem you've described.

Upvotes: -5

C&#233;cile Boucheron
C&#233;cile Boucheron

Reputation: 659

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

Upvotes: 19

RhinoWalrus
RhinoWalrus

Reputation: 3089

Setting a height on your body and html of 100% should fix you up. Without a defined height your content is not overflowing, so you will not get the desired behavior.

html, body {
  overflow-y:hidden;
  height:100%;
}

Upvotes: 55

Giovanni Silveira
Giovanni Silveira

Reputation: 1281

Technically, the size of your body and html are wider than the screen, so you will have scrolling. You will need to set margin:0; and padding:0; to avoid the scrolling behavior, and add some margin/padding to #content instead.

Upvotes: -3

Related Questions