Chromium / Chrome 页面在软重新加载或硬重新加载时垂直向上滚动-解网

问：

当软或硬重新加载页面时，Win 和 Mac 上所有较新的基于 Chromium 的浏览器都会在 2-15px 之间执行轻微的垂直向上滚动。

<!doctype html>
<html>
    <head></head>
    <body>
        <h1>heading</h1>
        <p>lorem ipsum.....</p>
        <p>lorem ipsum.....</p>
        <!-- repeat until page scrolls -->
    </body>
 </html>

删除修复了在某些情况下重新加载时的滚动问题。删除元素的边距还修复了重新加载时的滚动问题。line-heighth1

浏览器确认有漏洞：

W11边缘：96.0.1054.62
W81 铬：96.0.4664.45
Mac Chrome浏览器：96.0.4664.110
W10铬：96.0.4664.110
W10边缘：96.0.1054.62
W10 Opera：[最新]

编辑

您也可以转到任何长时间滚动的维基百科页面并复制。或任何网站，就此而言。

编辑 2

可以确认Firefox也遭受了同样的痛苦，尽管频率要低得多，并且在随后的重新加载中不会。

CSS 谷歌浏览器

/**
 * Maybe scroll on reload
 *
 * All Chromium browsers >= 96.0.1054.62 have a reload/rescroll bug that scrolls
 * the window by 1-2 pixels per reload
 */

$(document).ready(function() {
    var pageName = window.location.pathname.split("/").pop(); // string(6) "README"

    $(window).on("beforeunload", function() {
        sessionStorage.setItem(pageName + "_scroll_pos", document.documentElement.scrollTop); // README_scroll_pos = 225
    });
    if (window.performance.navigation.type) { // Run if there is a reload or navigation event; reload = 1, navigation = 2
        setTimeout(function() {
            var yPos = sessionStorage.getItem(pageName + "_scroll_pos");

            if (yPos && yPos != document.documentElement.scrollTop) {
                //console.log("We are scrolling to yPos: " + yPos + " because document.documentElement.scrollTop is now: " + document.documentElement.scrollTop);
                $(window).scrollTop(sessionStorage.getItem(pageName + "_scroll_pos"));

                //console.log("We are deleting " + pageName + "_scroll_pos");
                sessionStorage.removeItem(pageName + "_scroll_pos");
            }
            //else {
            //    console.log("We are NOT scrolling to yPos: " + yPos + " because document.documentElement.scrollTop is already: " + document.documentElement.scrollTop);
            //    console.log("We are NOT deleting " + pageName + "_scroll_pos");
            //}
            //console.log(sessionStorage);
        }, 100);
    }
});

1赞 Jeff 11/5/2022 #2

这是由现代 Chromium 浏览器中的滚动锚定实现引起的。

解决方法是选择退出滚动锚定。body { overflow-anchor: none; }

上一个：为什么 DOMDocument 将 html 引号实体都转换为实际引号？

下一个：在 getComputedStyle（）上获得意外结果

Chromium / Chrome 页面在软重新加载或硬重新加载时垂直向上滚动

Chromium / Chrome page vertical scrolling upwards on soft or hard reload

评论