[英]Setting overflow-y: hidden; causes the page to jump to the top in Firefox
我有一些 javascript 可以处理我网站上的打开模式弹出窗口,它还将<html>
元素上的overflow-y
属性设置为hidden
。 在 Chrome 和 IE 中,这按预期工作 - 滚动条隐藏,模式弹出窗口后面的页面保持在相同的滚动位置。 当popup关闭时, overflow-y
设置为scroll
,页面状态和位置和之前一样。
但是,在 Firefox 中,一旦将overflow-y
更改为hidden
,页面滚动位置就会跳转到最顶部,因此当关闭弹出窗口时,用户的视图已更改 - 不理想。
这个问题可以在这个jsfiddle上看到
这种行为有什么解决方案吗?
不要在html
上使用overflow: hidden
,只在body
。 我遇到了同样的问题,但通过删除html
修复了它。
反而 :
$('body, html').css('overflow', 'hidden');
做 :
$('body').css('overflow', 'hidden');
在检查器窗口中检查后我遇到了同样的问题,我注意到在重置 CSS 中,HTML 设置为
HTML {
overflow-y: scroll;
}
您可以通过将其设置为
HTML {
overflow-y: initial;
}
如果您不想触摸重置 CSS 或只是评论它
插件和代码绝对没问题
将模态位置从绝对位置更改为固定位置:
#mymodal {
position: fixed
}
在不同的浏览器中有很多错误,而且功能无处不在,所以在修改 body 和 html 标签上的样式时要小心。
为了解决这个问题,我必须将正文的内容包装到它自己的元素中并对其应用滚动限制:
var $content = $('<div/>').append($body.contents()).appendTo($body);
$content.css('overflow-y', 'hidden');
这是我能够在不同的浏览器和设备上始终如一地工作的唯一方法。
我刚遇到这个问题。 我的解决方法是
/**
* 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);
});
然而,这并不能解决如果用户调整视口大小会发生什么的问题。
编辑:我刚刚看到您的代码,并且您使用了带有 href="#" 的链接。 这很可能是原因。 我建议删除 href 属性或使用按钮。
您应该考虑这可能不是由 css 本身引起的。 在我的例子中,我用一个链接<a href="#">open popup</a>
: <a href="#">open popup</a>
那么实际上导致跳转到顶部的是链接的 href 属性中的“#”。
我删除了它并在我的 html 和 body 标签中添加了一个 noscroll 类:
.noscroll {
overflow: hidden;
}
从一开始就保持身高 100% 对我来说解决了这个问题。
body{
height:100vh;
overflow:auto;
}
body.with-modal{
overflow:hidden;
}
使用 body 标签而不是 html。
JS小提琴:- http://jsfiddle.net/SBLgJ/6/
JS 变化:-
$(document).ready(function() {
$('#middle a').on('click', function(e) {
e.preventDefault();
$('body').css('overflow-y', 'hidden');
});
});
CSS 更改:-
body {
overflow-y:scroll;
}
已报告此类行为的问题。 ( https://github.com/necolas/normalize.css/issues/71 )
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.