31

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!

Cécile Boucheron
  • 649
  • 1
  • 6
  • 11
  • Just wanna link this post which is related and provide answers for people still looking for it : [link](https://stackoverflow.com/questions/14270084/overflow-xhidden-doesnt-prevent-content-from-overflowing-in-mobile-browsers). – Grms Jan 26 '19 at 10:03

11 Answers11

52

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%;
}
RhinoWalrus
  • 3,009
  • 2
  • 32
  • 41
  • 5
    Thanks, but this does not fix the issue :/ – Cécile Boucheron Oct 08 '13 at 21:54
  • It may be easier to get a useful answer if you drop an example in a jsfiddle and provide a link: (http://jsfiddle.net/). From the provided snippet it's a bit of a guessing game as to what 'might' fix it. – RhinoWalrus Oct 08 '13 at 22:11
  • Thanks but jsFiddle does not show any issue and the scroll gets disabled with my code. The issue happens in the browser window, in Chrome only, and with the Mac magic mouse. – Cécile Boucheron Oct 08 '13 at 22:28
  • This works on iPhone as well. It is a bit fragile on landscape if Safaris toolbar appears, reducing the inner width of the page. – Paddy Dec 04 '15 at 12:19
19

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;
}
Cécile Boucheron
  • 649
  • 1
  • 6
  • 11
  • would help me the exact opposite, how to make a scroll-disabled page to be scrollable on https://www.latimes.com/sports/soccer/la-sp-us-defense-world-cup-20190622-story.html 1st remove hood: #reg-overlay{background-color:none!important} –  Jun 25 '19 at 06:08
15

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 );       
}
Scheintod
  • 7,953
  • 9
  • 42
  • 61
  • This is a good solution but can be broken if you change an iPhone to landscape and make the browser task bar appear. – Paddy Dec 04 '15 at 12:02
  • 1
    This should be the most accepted answer. With a few adjustments this solves all the problems except what @Paddy here is talking about, but the odds are so small this is the cleanest solution. Whoever follows this, remember to add a class called noscroll with position fixed & width and height at 100%. – nathanielperales Jun 21 '18 at 07:53
3

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%.

dareapersven
  • 71
  • 3
2

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', '');
Maxi
  • 39
  • 3
1

Use:

overflow: hidden;
height: 100%;
position: fixed;
width: 100%;
Gagan
  • 53
  • 6
1
body { overflow-x: hidden;}

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

Aniruddha
  • 774
  • 1
  • 7
  • 18
Neagoe Andreas
  • 11
  • 1
0

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).

Vikas Bidhuri
  • 9
  • 1
-3

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.

Giovanni Silveira
  • 1,281
  • 8
  • 7
  • Hi Giovanni, thanks for your reply. Not sure to get what you mean. You mean I should set margin/padding:0; on the html and body? – Cécile Boucheron Oct 08 '13 at 17:01
  • Correct, just add html, body { margin:0; padding:0; overflow-y:hidden; } – Giovanni Silveira Oct 08 '13 at 19:26
  • Unfortunately this does not work and I can still scroll in the page. – Cécile Boucheron Oct 08 '13 at 19:57
  • You might need to add `box-sizing:border-box;` to `#content` – Giovanni Silveira Oct 08 '13 at 20:37
  • Wait, you are experiencing vertical scrolling? http://jsfiddle.net/9esqC/ Seems to not scroll even without the `box-sizing:border-box;` – Giovanni Silveira Oct 08 '13 at 21:21
  • Well, in Fiddle it looks good but not in my browser window. If you just try write the code above in a new file and open it with Chrome, it will scroll. – Cécile Boucheron Oct 08 '13 at 21:36
  • Ok, I see what you mean... Its the actual clicking of the wheel that makes it possible to scroll... To disable that, you would need to use some jQuery. [JsFiddle](http://jsfiddle.net/9esqC/1/) Thanks to [source](http://stackoverflow.com/questions/5136845/prevent-middle-mouse-click-scrolling) – Giovanni Silveira Oct 08 '13 at 21:40
  • Ok, so you might need to do some more research on how to disable that feature via javascript/jquery. With an actual mouse, it wouldn't scroll, unless I clicked the wheel and moved the mouse up/down to have a scroll behavior. With that javascript I added, this gets blocked. I'm not sure how it would be done for the Mac magic mouse, unfortunately. – Giovanni Silveira Oct 08 '13 at 22:09
  • You can probably try [this solution](http://stackoverflow.com/questions/3656592/how-to-programmatically-disable-page-scrolling-with-jquery) – Giovanni Silveira Oct 08 '13 at 22:15
-4

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;
}
Milan Meuleman
  • 1
-5

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.

David
  • 1