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

Question

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    x000D   x000D  html  x000D  body   x000D    overflow-y  hidden  x000D    x000D   x000D   content   x000D    position  absolute  x000D    width  100   x000D    x000D   x000D   step   x000D    position  relative  x000D    height  500px  x000D    margin-bottom  500px  x000D    x000D   lt body gt  x000D     lt div id  content  gt  x000D       lt div class  step  gt this is the 1st step lt  div gt  x000D       lt div class  step  gt this is the 2nd step lt  div gt  x000D       lt div class  step  gt this is the 3rd step lt  div gt  x000D     lt  div gt  x000D   lt  body gt  x000D   x000D   x000D    Does anybody know how to block the vertical scrolling in Chrome   Thanks

User · Answer

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

User · Answer

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

User · Answer

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

User · 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    lt body gt     lt div id  content  gt       lt div id  steps  gt          lt div class  step  gt this is the 1st step lt  div gt          lt div class  step  gt this is the 2nd step lt  div gt          lt div class  step  gt this is the 3rd step lt  div gt        lt  div gt      lt  div gt   lt  body gt    content     position absolute    width 100     overflow-y hidden    top 0    bottom 0     step     position relative    height 500px    margin-bottom 500px

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

Use   overflow  hidden  height  100   position  fixed  width  100

User · Answer

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

User · Answer

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

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

Examples related to css

Examples related to google-chrome

Examples related to scroll

Examples related to scrollbar

Examples related to overflow