设置溢出-y：隐藏； 导致页面在 Firefox 中跳转到顶部
[英]Setting overflow-y: hidden; causes the page to jump to the top in Firefox
问题描述
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 .
我有一些 javascript 可以处理我网站上的打开模式弹出窗口，它还将<html>元素上的overflow-y属性设置为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.在 Chrome 和 IE 中，这按预期工作 - 滚动条隐藏，模式弹出窗口后面的页面保持在相同的滚动位置。 When the popup is closed, overflow-y is set to scroll and the page is in the same state and position as before.当popup关闭时， overflow-y设置为scroll ，页面状态和位置和之前一样。
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.但是，在 Firefox 中，一旦将overflow-y更改为hidden ，页面滚动位置就会跳转到最顶部，因此当关闭弹出窗口时，用户的视图已更改 - 不理想。
The problem can be seen on this jsfiddle这个问题可以在这个jsfiddle上看到
Is there any solution for this behaviour?这种行为有什么解决方案吗？
8 个解决方案
解决方案1
13 2016-08-27 17:20:20
Don't use overflow: hidden on html , only on body .不要在html上使用overflow: hidden ，只在body 。 I had the same problem but fixed it by removing html .我遇到了同样的问题，但通过删除html修复了它。
Instead :反而 ：
$('body, html').css('overflow', 'hidden');
Do :做 ：
$('body').css('overflow', 'hidden');
解决方案2
3 2018-07-24 17:13:09
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插件和代码绝对没问题
解决方案3
1 2018-05-12 10:29:54
change modal position from absolute to fixed:将模态位置从绝对位置更改为固定位置：
#mymodal {
position: fixed
}
解决方案4
0 2015-06-30 23:51:20
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.这是我能够在不同的浏览器和设备上始终如一地工作的唯一方法。
解决方案5
0 2016-08-18 16:19:31
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.然而，这并不能解决如果用户调整视口大小会发生什么的问题。
解决方案6
0 2021-06-06 23:32:49
Edit: I just saw your code and you used a link with href="#".编辑：我刚刚看到您的代码，并且您使用了带有 href="#" 的链接。 That is most likely the cause.这很可能是原因。 I'd suggest removing the href property or use a button for it.我建议删除 href 属性或使用按钮。
You should consider that this might not be caused by the css itself.您应该考虑这可能不是由 css 本身引起的。 In my case I opened my popup with a link: <a href="#">open popup</a> So what actually caused the jump to the top was the "#" in the href property of the link.在我的例子中，我用一个链接<a href="#">open popup</a> ： <a href="#">open popup</a>那么实际上导致跳转到顶部的是链接的 href 属性中的“#”。
I removed it and added a noscroll class to my html and body tag:我删除了它并在我的 html 和 body 标签中添加了一个 noscroll 类：
.noscroll {
overflow: hidden;
}
解决方案7
-1 2018-02-05 01:52:21
Keeping the body height 100% from the beginning solved the problem for me.从一开始就保持身高 100% 对我来说解决了这个问题。
body{
height:100vh;
overflow:auto;
}
body.with-modal{
overflow:hidden;
}
解决方案8
-2 2013-02-22 08:28:15
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 )
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.