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

我已经有一些JavaScript处理我的网站上打开模式弹出窗口，它还将<html>元素上的overflow-y属性设置为hidden。在Chrome和IE中，按预期工作 - 滚动条隐藏，模式弹出窗口后面的页面保持相同的滚动位置。当弹出窗口关闭时，overflow-y设置为scroll，页面处于与之前相同的状态和位置。设置overflow-y：hidden;导致页面跳转到Firefox的顶部

但是，在Firefox中，只要overflow-y更改为hidden，页面滚动位置就跳转到顶部，所以当弹出窗口关闭时，用户的视图发生了变化 - 并不理想。

的问题可以看出on this jsfiddle

是否有此行为的任何解决方案？

来源

2013-02-22 Runcible

似乎在FF 19中工作得很好。 – robertklep 2013-02-22 08:23:05

我正面临类似的问题，你怎么能够处理这个问题？ – 2015-04-02 09:26:53

您是否曾经为此找到过解决方案？如果是这样，你能提供一个答案吗？我快要疯了。 – Grant 2015-07-14 06:51:42

-1

使用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-22 08:28:15

此解决方案在Google Chrome v35.0.1916.114中根本无法使用m – Erik 2014-06-10 11:18:29

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

为了解决这个问题，我不得不与正文内容包装成自己的元素，并应用在其上的滚动限制：

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

这是我已经能够得到这个整个工作始终的唯一途径不同的浏览器和设备。

来源

2015-06-30 23:51:20

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

/** 
* 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-18 16:19:31

请勿在html上使用overflow: hidden，只能在body上使用。我有同样的问题，但通过删除html来修复它。

相反：

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

务必：

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

来源

2016-08-27 17:20:20 Steffi

在iOS上，这允许溢出的内容仍可滚动。 – Gavin 2017-01-11 13:32:41

从一开始就保持身体高度100％解决了这个问题对我来说。

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

来源

2018-02-05 01:52:21

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

回答

相关问题