Question

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

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

可以看到问题on this jsfiddle

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

Answer 1

请勿在{{1}} overflow: hidden上使用html。我遇到了同样的问题，但通过删除body来修复它。

相反：

html

做：

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

Answer 2

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

#mymodal {
    position: fixed
 }

Answer 3

我有同样的问题在检查器窗口中对其进行检查后，我注意到在重置的CSS中，HTML设置为

HTML {
    overflow-y: scroll;
}

您可以通过将其设置为

来解决此问题

HTML {
    overflow-y: initial;
}

如果您不想触摸重置CSS或仅对其发表评论

插件和代码绝对没问题

Answer 4

不同浏览器中存在大量错误，功能遍布各处，因此请小心修改body和html标签上的样式。

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

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

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

Answer 5

我刚遇到这个问题。我的修复是

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

然而，这并没有解决用户调整视口大小时会发生什么的问题。

Answer 6

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

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

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

.noscroll {
    overflow: hidden;
}

Answer 7

从一开始就保持身高100％解决了我的问题。

body{
   height:100vh;
   overflow:auto;
}
body.with-modal{
   overflow:hidden;
}

Answer 8

使用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）

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

8 个答案: