1

假设你设置window.history.scrollRestoration = "manual"在一个网页上。

在 Chrome/Firefox 上，每当您单击锚点时，页面都会滚动到链接元素的位置，并且每当您在历史记录中后退/前进时，滚动位置保持不变。
在 Safari 上，无论何时单击锚点都不会发生任何事情，并且无论何时在历史记录中向后/向前导航时，页面都会滚动到链接到当前页面片段 (#sectionXYZ) 的元素的位置。

当我说“浏览历史”时，我的意思是要么使用window.history.back()，要么使用浏览器的后退/前进按钮。window.history.forward()window.history.go(N)

在下面的示例中，您有 2 个按钮（蓝色/红色），单击它们会将 2 个不同的状态推送到历史堆栈中。
尝试并单击它们几次并在历史记录中向后/向前导航以复制我描述的行为。

为什么即使history.scrollRestoration设置为 Safari 也会恢复页面的滚动位置manual？
有没有办法像 Chrome 和 Firefox 一样防止这种行为？

html,body,div {
    height: 100vh;
    width: 100vw;
    margin: 0;
    overflow-x: hidden;
}    
#nav {
    display:flex;
    justify-content:center;
    position:fixed;
    width: 100%;
    height: 100px;
    background: rgba(0,0,0,0.7);
}
nav > a {
    display:grid;
    justify-content:center;
    align-items:center;
    text-decoration:none;
    color:white;
    width: 30%;
    height: 90%;
    font-size:120%;
    cursor:pointer;
}
#a1, #blue{
    background-color:blue;
}   
#a2, #red {
    background-color:red;
}
<body>
    <nav id = "nav">
        <a id = "a1" href = "#blue">BLUE</a> 
        <a id = "a2" href = "#red">RED</a> 
    </nav>
    <div id = "blue"></div>
    <div id = "red"></div>

    <script>
        window.history.scrollRestoration = "manual";
        window.addEventListener("popstate", () => {
            console.log("blue: ", document.getElementById("blue").getBoundingClientRect());
            console.log("red: ",  document.getElementById("red").getBoundingClientRect());
        });
        document.getElementById("a1").addEventListener("click", () => window.history.pushState("blue", "", "#blue"));
        document.getElementById("a2").addEventListener("click", () => window.history.pushState("red",  "", "#red"));
    </script>
</body>

4

0 回答 0