Menu
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?
303
It's because <body> has a default of 8px margin so when you hide the <body> the margin goes away.
To hide the horizontal scrollbar and prevent horizontal scrolling, use overflow-x: hidden: HTML.
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.
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.
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');
75
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
40
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
