Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Setting overflow-y: hidden; causes the page to jump to the top in Firefox

Tags:

I've got some javascript which handles opening modal popups on my website, and it also sets the overflow-y property on the <html> element to hidden. In Chrome and IE this works as expected - the scrollbar hides, and the page behind the modal popup remains in the same scroll position. When the popup is closed, overflow-y is set to scroll and the page is in the same state and position as before.

However in Firefox, as soon as overflow-y is changed to hidden the page scroll position jumps to the very top, and so when the popup is closed the view has changed for the user - not ideal.

The problem can be seen on this jsfiddle

Is there any solution for this behaviour?

like image 303
Runcible Avatar asked Feb 22 '13 08:02

Runcible


People also ask

Why does overflow hidden move body to top of the page?

It's because <body> has a default of 8px margin so when you hide the <body> the margin goes away.

Does overflow hidden prevent scrolling?

To hide the horizontal scrollbar and prevent horizontal scrolling, use overflow-x: hidden: HTML.

Why does overflow hidden not work?

It is because you are using position absolute. You cannot use position absolute with overflow hidden, because position absolute moves the targeted element out of context with the document structure.

What does overflow hidden do?

overflow:hidden prevents scrollbars from showing up, even when they're necessary. Explanation of your CSS: margin: 0 auto horizontally aligns the element at the center. overflow:hidden prevents scrollbars from appearing.


2 Answers

Don't use overflow: hidden on html, only on body. I had the same problem but fixed it by removing html.

Instead :

$('body, html').css('overflow', 'hidden');

Do :

$('body').css('overflow', 'hidden');

like image 75
Steffi Avatar answered Oct 15 '22 05:10

Steffi


I had the same issue after checking it in the inspector window, I noticed that in the reset CSS, HTML is set to

HTML {     overflow-y: scroll; } 

you can fix this by setting it to

HTML {     overflow-y: initial; } 

If you don't want to touch reset CSS or just comment it

plugin and code is absolutely fine

like image 40
mohnish Avatar answered Oct 15 '22 06:10

mohnish