當軟或硬重新加載頁面時，Win 和 Mac 上所有基于 Chromium 的較新瀏覽器都會根據網頁的line-height設定（無論是在正文還是 html 上設定）執行2-15px 之間的輕微垂直滾動。
如果您可以重復并確認，請尋找確認和可能的解決方案。
編輯：它 100% 絕對不是我的服務器/頭檔案，它 100% 絕對是 Chromium 的錯誤，至少從 96.0.1054.62 開始。
<!doctype html>
<html>
<head>
<style>
body{line-height:1.5} /* tried 1 - 2.5 in increments of .1 */
/* removing line-height stops scrolling */
</style>
</head>
<body>
<p>lorem ipsum.....</p>
<p>lorem ipsum.....</p>
<!-- repeat until page scrolls -->
</body>
</html>
洗掉line-height為我修復了重新加載時的滾動。
瀏覽器確認錯誤：
- w11 邊緣：96.0.1054.62
- w81 鉻：96.0.4664.45
- mac 鉻：96.0.4664.110
- w10 鉻：96.0.4664.110
- w10 邊緣：96.0.1054.62
- w10 歌劇：[最新]
編輯
您還可以轉到任何長時間滾動的維基百科頁面并進行復制。此頁面已修復，但我無法弄清楚他們是如何做到的：https : //developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
編輯
可以確認 Firefox 遭受同樣的影響，盡管頻率要低得多，并且不會在隨后的重新加載時受到影響。
uj5u.com熱心網友回復：
此修復在上面鏈接的 dev.mozilla/CSS_Grid 頁面上產生相同的行為。您可以將其setTimeout降低到 25，但低于此值并且不會發生重新滾動。
/**
* Maybe scroll on reload
*
* All Chromium browsers >= 96.0.1054.62 have a reload/rescroll bug that scrolls
* the window if the page has line-height set
*
*/
document.addEventListener( "DOMContentLoaded", function() {
window.onbeforeunload = function() {
sessionStorage.setItem( "scroll_pos", document.documentElement.scrollTop );
};
setTimeout( function() {
var yPos = sessionStorage.getItem( "scroll_pos" );
if ( yPos && yPos != document.documentElement.scrollTop ) {
window.scrollTo( 0, sessionStorage.getItem( "scroll_pos" ) );
sessionStorage.removeItem( "scroll_pos" );
}
}, 50 );
});
任何可以重寫/改進我的 js 的人都會受到歡迎，因為我對它很糟糕。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/405813.html
標籤：