24

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

但是在 Firefox 中，一旦overflow-y更改为hidden页面滚动位置就会跳转到最顶部，因此当弹出窗口关闭时，用户的视图已更改 - 不理想。

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

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

4

8 回答 8

15

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

反而 ：

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

做 ：

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

于 2016-08-27T17:20:20.427 回答
5

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

HTML {
    overflow-y: scroll;
}

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

HTML {
    overflow-y: initial;
}

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

插件和代码绝对没问题

于 2018-07-24T17:13:09.277 回答
2

将模态位置从绝对更改为固定：

#mymodal {
    position: fixed
 }
于 2018-05-12T10:29:54.480 回答
0

不同的浏览器有很多错误，功能无处不在，所以要小心修改 body 和 html 标签的样式。

为了解决这个问题，我必须将正文的内容包装到它自己的元素中并对其应用滚动限制：

var $content = $('<div/>').append($body.contents()).appendTo($body);
$content.css('overflow-y', 'hidden');

这是我能够在不同的浏览器和设备上始终如一地工作的唯一方法。

于 2015-06-30T23:51:20.793 回答
0

编辑：我刚刚看到您的代码，您使用了带有 href="#" 的链接。这很可能是原因。我建议删除 href 属性或使用按钮。

您应该考虑这可能不是由 css 本身引起的。在我的例子中，我用一个链接打开了我的弹出窗口：<a href="#">open popup</a> 所以实际上导致跳转到顶部的是链接的 href 属性中的“#”。

我删除了它并在我的 html 和 body 标签中添加了一个 noscroll 类：

.noscroll {
    overflow: hidden;
}
于 2021-06-06T23:32:49.693 回答
0

我刚遇到这个问题。我的解决方法是

/**
 * 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);
});

然而，这并不能解决如果用户调整视口大小会发生什么的问题。

于 2016-08-18T16:19:31.170 回答
-1

从一开始就保持体高 100% 为我解决了这个问题。

body{
   height:100vh;
   overflow:auto;
}
body.with-modal{
   overflow:hidden;
}
于 2018-02-05T01:52:21.127 回答
-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');  
    });
});

CSS更改：-

body {
    overflow-y:scroll;
}

存在此类行为的报告问题。（https://github.com/necolas/normalize.css/issues/71）

于 2013-02-22T08:28:15.867 回答