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

Question

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

24

我有一些处理网站上模态弹出窗口的JavaScript代码，它还会将<html>元素上的overflow-y属性设置为hidden。在Chrome和IE中，这个功能正常工作——滚动条被隐藏，而在模态弹出窗口后面的页面仍保持相同的滚动位置。当关闭弹出窗口时，overflow-y被设置为scroll，页面与之前的状态和位置相同。

然而，在Firefox中，只要overflow-y被更改为hidden，页面的滚动位置立即跳转到顶部，因此当关闭弹出窗口时，用户的视图发生了变化——这不太理想。

您可以通过在这个jsfiddle上查看问题。

是否有任何解决这种行为的方法？

- Runcible

在Firefox 19中似乎运行良好。 - robertklep

我遇到了类似的问题，你是如何处理的？ - Manik Arora

你有没有找到这个问题的解决方案？如果有，能否提供一个答案？我快要疯了。 - Grant

这是一段时间以前的事情了，但我相信这个问题在较新版本的Firefox中已经解决了。如果我在最新的FF / Windows中检查我在帖子中的旧jsfiddle，它可以正常工作。 - Runcible

移动版Safari iOS v7的行为与此相同。如果我在块级元素中添加overflow:hidden，则它会自动滚动到顶部。 - Rantiev

8个回答

5

我发现了同样的问题。在检查窗口中查看后，我注意到在重置 CSS 中，HTML 被设置为

。

HTML {
    overflow-y: scroll;
}

您可以通过将其设置为以下方式来修复此问题：

HTML {
    overflow-y: initial;
}

如果您不想触及重置CSS或仅需对其进行注释

插件和代码都是可以的

- mohnish

1

首先将其设置为初始状态对我没有帮助。当滚动并将溢出设置为“hidden”时，我仍然看到滚动位置被重置为0。 - Tom

谢谢，overflow-y: scroll 也是我的问题。 - gdaniel

2

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

#mymodal {
    position: fixed
 }

- N.SH

0

不同的浏览器中存在许多错误，功能也存在差异，因此在修改body和html标签的样式时要小心。

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

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

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

- Marcin

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

然而，这并不能解决用户调整视口大小的问题。

- Luke Madhanga

0

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

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

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

.noscroll {
    overflow: hidden;
}

- Andreas Dinauer

-1

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

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

- Gustavo Bremm

-2

使用body标签而不是html标签。

JS Fiddle :- 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)

- Aditya Singh

这个解决方案在Google Chrome v35.0.1916.114 m中根本不起作用。 - Airikr

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Steffi · Accepted Answer

不要在html上使用overflow: hidden，只在body上使用。我曾经遇到同样的问题，但通过移除html解决了它。

相反： $('body, html').css('overflow', 'hidden'); 应该是： $('body').css('overflow', 'hidden');