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

css google-chrome scroll scrollbar overflow
Cécile Boucheron picture Cécile Boucheron · Oct 8, 2013 · Viewed 102.3k times · Source

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:

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

Thanks!

Answer

RhinoWalrus picture RhinoWalrus · Oct 8, 2013

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

Related questions

How to remove focus border (outline) around text/input boxes? (Chrome)

Can anyone explain how to remove the orange or blue border (outline) around text/input boxes? I think it only happens on Chrome to show that the input box is active. Here's the input CSS I'm using: input { background-color: transparent; …

Read More
Hide scroll bar, but while still being able to scroll

I want to be able to scroll through the whole page, but without the scrollbar being shown. In Google Chrome it's: ::-webkit-scrollbar { display: none; } But Mozilla Firefox and Internet Explorer don't seem to work like that. I also tried this …

Read More
Remove blue border from css custom-styled button in Chrome

I'm working on a web page, and I want custom-styled <button> tags. So with CSS, I said: border: none. Now it works perfectly in safari, but in chrome, when I click one of the buttons, it puts an …

Read More