javascript 设置溢出-y：隐藏；导致页面在 Firefox 中跳转到顶部
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15019510/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Setting overflow-y: hidden; causes the page to jump to the top in Firefox
提问by Runcible
I've got some javascript which handles opening modal popups on my website, and it also sets the overflow-yproperty 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-yis set to scrolland the page is in the same state and position as before.
我有一些 javascript 处理在我的网站上打开模式弹出窗口，它还将元素overflow-y上的属性设置<html>为hidden. 在 Chrome 和 IE 中，这按预期工作 - 滚动条隐藏，模式弹出窗口后面的页面保持在相同的滚动位置。当弹出窗口关闭时，overflow-y设置为scroll并且页面处于与以前相同的状态和位置。
However in Firefox, as soon as overflow-yis changed to hiddenthe page scroll position jumps to the very top, and so when the popup is closed the view has changed for the user - not ideal.
但是在 Firefox 中，一旦overflow-y更改为hidden页面滚动位置就会跳转到最顶部，因此当弹出窗口关闭时，用户的视图已更改 - 并不理想。
The problem can be seen on this jsfiddle
这个问题可以在这个jsfiddle上看到
Is there any solution for this behaviour?
这种行为有什么解决方案吗？
回答by Steffi
Don't use overflow: hiddenon html, only on body.
I had the same problem but fixed it by removing html.
不要使用overflow: hiddenon html，只使用on body。我有同样的问题，但通过删除html.
Instead :
反而 ：
$('body, html').css('overflow', 'hidden');
$('body, html').css('overflow', 'hidden');
Do :
做 ：
$('body').css('overflow', 'hidden');
$('body').css('overflow', 'hidden');
回答by N.SH
change modal position from absolute to fixed:
将模态位置从绝对位置更改为固定位置：
#mymodal {
position: fixed
}
回答by mohnish
I had the same issue after checking it in the inspector window, I noticed that in the reset CSS, HTML is set to
在检查器窗口中检查后我遇到了同样的问题，我注意到在重置 CSS 中，HTML 设置为
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
如果您不想触摸重置 CSS 或只是评论它
plugin and code is absolutely fine
插件和代码绝对没问题
回答by Marcin
There are lots of bugs in the different browsers and the functionality is all over the place so be careful modifying styles on body and html tags.
在不同的浏览器中有很多错误，而且功能无处不在，所以修改 body 和 html 标签的样式时要小心。
To solve this issue i had to wrap the body's content into its own element and apply the scrolling restriction on it:
为了解决这个问题，我必须将正文的内容包装到它自己的元素中并对其应用滚动限制：
var $content = $('<div/>').append($body.contents()).appendTo($body);
$content.css('overflow-y', 'hidden');
This is the only way i've been able to get this working consistently across different browsers and devices.
这是我能够在不同的浏览器和设备上始终如一地工作的唯一方法。
回答by Luke Madhanga
I just encountered this problem. My fix was
我刚遇到这个问题。我的解决方法是
/**
* Store the scroll top position as applying overflow:hidden to the body makes it jump to 0
* @type int
*/
var scrollTop;
$(selecor).unbind('click.openmenu').on('click.openmenu', function (e) {
// Stuff...
scrollTop = $('body').scrollTop() || $('html').scrollTop();
$('body,html').css({overflow: 'hidden'});
});
$(selector).unbind('click.closemenu').on('click.closemenu', function (e) {
// Stuff
$('body,html').css({overflow: 'initial'}).scrollTop(scrollTop);
});
This however doesn't solve the problem of what happens if a user resize the viewport.
然而，这并不能解决如果用户调整视口大小会发生什么的问题。
回答by Gustavo Bremm
Keeping the body height 100% from the beginning solved the problem for me.
从一开始就保持100%的身高对我来说解决了这个问题。
body{
height:100vh;
overflow:auto;
}
body.with-modal{
overflow:hidden;
}
回答by Aditya Singh
Use body tag instead of html.
使用 body 标签而不是 html。
JS Fiddle :- http://jsfiddle.net/SBLgJ/6/
JS小提琴：- http://jsfiddle.net/SBLgJ/6/
JS Change:-
JS 变化：-
$(document).ready(function() {
$('#middle a').on('click', function(e) {
e.preventDefault();
$('body').css('overflow-y', 'hidden');
});
});
CSS Change:-
CSS 更改：-
body {
overflow-y:scroll;
}
There is a reported issue for such behavior. (https://github.com/necolas/normalize.css/issues/71)
已报告此类行为的问题。( https://github.com/necolas/normalize.css/issues/71)
