設置溢出-y：隱藏； 導致頁面在 Firefox 中跳轉到頂部
[英]Setting overflow-y: hidden; causes the page to jump to the top in Firefox
問題描述
我有一些 javascript 可以處理我網站上的打開模式彈出窗口，它還將<html>元素上的overflow-y屬性設置為hidden 。 在 Chrome 和 IE 中，這按預期工作 - 滾動條隱藏，模式彈出窗口后面的頁面保持在相同的滾動位置。 當popup關閉時， overflow-y設置為scroll ，頁面狀態和位置和之前一樣。
但是，在 Firefox 中，一旦將overflow-y更改為hidden ，頁面滾動位置就會跳轉到最頂部，因此當關閉彈出窗口時，用戶的視圖已更改 - 不理想。
這個問題可以在這個jsfiddle上看到
這種行為有什么解決方案嗎？
8 個解決方案
解決方案1
13 2016-08-27 17:20:20
不要在html上使用overflow: hidden ，只在body 。 我遇到了同樣的問題，但通過刪除html修復了它。
反而 ：
$('body, html').css('overflow', 'hidden');
做 ：
$('body').css('overflow', 'hidden');
解決方案2
3 2018-07-24 17:13:09
在檢查器窗口中檢查后我遇到了同樣的問題，我注意到在重置 CSS 中，HTML 設置為
HTML {
overflow-y: scroll;
}
您可以通過將其設置為
HTML {
overflow-y: initial;
}
如果您不想觸摸重置 CSS 或只是評論它
插件和代碼絕對沒問題
解決方案3
1 2018-05-12 10:29:54
將模態位置從絕對位置更改為固定位置：
#mymodal {
position: fixed
}
解決方案4
0 2015-06-30 23:51:20
在不同的瀏覽器中有很多錯誤，而且功能無處不在，所以在修改 body 和 html 標簽上的樣式時要小心。
為了解決這個問題，我必須將正文的內容包裝到它自己的元素中並對其應用滾動限制：
var $content = $('<div/>').append($body.contents()).appendTo($body);
$content.css('overflow-y', 'hidden');
這是我能夠在不同的瀏覽器和設備上始終如一地工作的唯一方法。
解決方案5
0 2016-08-18 16:19:31
我剛遇到這個問題。 我的解決方法是
/**
* 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);
});
然而，這並不能解決如果用戶調整視口大小會發生什么的問題。
解決方案6
0 2021-06-06 23:32:49
編輯：我剛剛看到您的代碼，並且您使用了帶有 href="#" 的鏈接。 這很可能是原因。 我建議刪除 href 屬性或使用按鈕。
您應該考慮這可能不是由 css 本身引起的。 在我的例子中，我用一個鏈接<a href="#">open popup</a> ： <a href="#">open popup</a>那么實際上導致跳轉到頂部的是鏈接的 href 屬性中的“#”。
我刪除了它並在我的 html 和 body 標簽中添加了一個 noscroll 類：
.noscroll {
overflow: hidden;
}
解決方案7
-1 2018-02-05 01:52:21
從一開始就保持身高 100% 對我來說解決了這個問題。
body{
height:100vh;
overflow:auto;
}
body.with-modal{
overflow:hidden;
}
解決方案8
-2 2013-02-22 08:28:15
使用 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設置為元素時，導致滾動顯示動畫不觸發
[英]When I set overflow-y:hidden to element causes scroll reveal animation to not fire
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.