设置overflow-y:hidden; 导致页面在Firefox中跳转到顶部

Run*_*ble 16 javascript css overflow

我有一些javascript来处理我的网站上打开模态弹出窗口,它还将元素的overflow-y属性设置<html>hidden.在Chrome和IE中,这可以正常工作 - 滚动条隐藏,模态弹出窗口后面的页面保持在相同的滚动位置.当弹出窗口关闭时,overflow-y设置为scroll并且页面处于与之前相同的状态和位置.

但是在Firefox中,只要overflow-y更改为hidden页面滚动位置就会跳到最顶层,因此当弹出窗口关闭时,用户的视图已经改变 - 不太理想.

这个问题可以在这个问题上看到

这种行为有什么解决方案吗?

Ste*_*ffi 9

不要只使用overflow: hiddenon html,on body.我有同样的问题,但通过删除修复它html.

相反:

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

做:

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

  • 在iOS上,这允许溢出的内容仍然可滚动. (4认同)
  • 在Chrome 74.0.3729.157上,内容仍跳到页面顶部。 (2认同)

小智 5

在检查器窗口中检查后我遇到了同样的问题,我注意到在重置 CSS 中,HTML 设置为

HTML {
    overflow-y: scroll;
}
Run Code Online (Sandbox Code Playgroud)

您可以通过将其设置为来解决此问题

HTML {
    overflow-y: initial;
}
Run Code Online (Sandbox Code Playgroud)

如果你不想触摸重置CSS或只是评论它

插件和代码绝对没问题


Adi*_*ngh -2

使用 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');  
    });
});
Run Code Online (Sandbox Code Playgroud)

CSS 更改:-

body {
    overflow-y:scroll;
}
Run Code Online (Sandbox Code Playgroud)

据报道,此类行为存在问题。(https://github.com/necolas/normalize.css/issues/71