Javascript 设置overflow-y：隐藏；导致页面在Firefox中跳转到顶部

我有一些javascript来处理打开网站上的模式弹出窗口，它还将

元素上的

overflow-y

属性设置为

hidden

。在Chrome和IE中，这与预期的效果一样-滚动条隐藏，模式弹出窗口后面的页面保持在相同的滚动位置。当弹出窗口关闭时，

overflow-y

被设置为

scroll

，页面处于与之前相同的状态和位置

然而，在Firefox中，只要

overflow-y

更改为

hidden

，页面滚动位置就会跳到最顶端，因此当弹出窗口关闭时，用户的视图就发生了变化——这并不理想

问题显而易见

---

这种行为有什么解决办法吗

使用body标记而不是html

JS小提琴：-

JS变更：-

$(document).ready(function() {
    $('#middle a').on('click', function(e) {
        e.preventDefault();
        $('body').css('overflow-y', 'hidden');  
    });
});

body {
    overflow-y:scroll;
}

CSS更改：-

$(document).ready(function() {
    $('#middle a').on('click', function(e) {
        e.preventDefault();
        $('body').css('overflow-y', 'hidden');  
    });
});

body {
    overflow-y:scroll;
}

---

据报道，此类行为存在一个问题。（）

在不同的浏览器中有很多bug，而且功能无处不在，所以要小心修改body和html标记上的样式

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

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

var$content=$（''）.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);
});

---

但是，这并不能解决用户调整视口大小时发生的问题。

不要在

html

上使用

overflow:hidden

，仅在

body

上使用。 我也有同样的问题，但通过删除

html

修复了它

相反：

$（'body，html'）.css（'overflow'，'hidden'）

做：

$（'body'）.css（'overflow'，'hidden'）
从一开始就保持100%的身体高度解决了我的问题

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

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

#mymodal {
    position: fixed
 }

我也有同样的问题
在inspector窗口中检查后，我注意到在重置CSS中，HTML设置为

HTML {
    overflow-y: scroll;
}

您可以通过将其设置为

HTML {
    overflow-y: initial;
}

如果您不想触摸重置CSS或只是对其进行注释

插件和代码绝对不错
编辑：我刚看到你的代码，你使用了href=“#”的链接。这很可能是原因。我建议删除href属性或使用按钮

你应该考虑这可能不是CSS本身造成的。
在我的例子中，我打开了一个链接的弹出窗口：

因此，实际导致跳转到顶部的是链接href属性中的“#”

我删除了它，并将noscroll类添加到我的html和body标记中：

.noscroll {
    overflow: hidden;
}

在FF 19中似乎工作得很好。我面临着类似的问题，你是如何处理的？你有没有找到解决方案？如果是，你能提供一个答案吗？我快要失去理智了。这是很久以前的事了，但我相信新版本的firefox已经不存在了。如果我在最新的FF/Windows中查看我的旧JSFIDLE，它可以正常工作。若我添加overflow:hidden来阻止它，它会自动滚动到页面顶部。这个解决方案在Google Chrome v35.0.1916.114 mOn iOS中根本不起作用，这允许溢出的内容仍然可以滚动。在Chrome 74.0.3729.157上，内容仍然会跳到页面顶部。我有
html{overflow-y:scroll}
从
reset.css
样式表中删除，解决了我在Chrome和Firefox中的问题。首先将其设置为initial对我没有帮助。当滚动并将溢出设置为“隐藏”时，我仍然看到滚动位置被重置回0