使用浏览器后退按钮在可滚动元素中导航

Question

场景如下：我有一个带有滚动条的元素。用户单击将他们带到此元素内的书签的链接，这会导致元素滚动。之后，当用户想要返回到原始滚动位置时，他们自然要做的就是单击浏览器的后退按钮。有趣的是，浏览器的地址栏会更新以反映元素内的初始导航以及后退按钮的点击。但是，单击后退按钮不会导致所需的滚动。这是有道理的。那么，有没有办法使用直接的 javascript（没有第三方库）来实现这一点？下面是一个完整的示例，在 div 的底部有一个链接。任何援助将不胜感激。<style>    div {        height:400px;        overflow-y: auto;    }    span {        position:relative;        display:block;        width: 600px;        margin-top: 30px;        margin-bottom: 30px;    }</style><div>    <span id="first">        First: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elementum eu facilisis sed odio morbi quis. Vitae purus faucibus ornare suspendisse sed nisi lacus sed. Dignissim diam quis enim lobortis scelerisque fermentum dui faucibus. Porta non pulvinar neque laoreet. Pulvinar sapien et ligula ullamcorper malesuada proin. Neque gravida in fermentum et. Magna sit amet purus gravida. Id porta nibh venenatis cras sed felis. Sed egestas egestas fringilla phasellus faucibus. Mus mauris vitae ultricies leo integer malesuada nunc vel. Pellentesque eu tincidunt tortor aliquam nulla facilisi. Dis parturient montes nascetur ridiculus mus mauris vitae. Ac orci phasellus egestas tellus rutrum. Aliquam ut porttitor leo a diam sollicitudin tempor. Risus nullam eget felis eget nunc lobortis. Sodales ut eu sem integer vitae justo. Volutpat commodo sed egestas egestas fringilla phasellus faucibus.    </span>

Answer 1

当用户点击链接到 id 或浏览器后退按钮时，url 会发生变化。所以你可以处理这个事件：

window.addEventListener('hashchange', function (event) {

    // The URL changed...

});

然后你有event.newURL和event.oldURL。有了它，你可以做任何你想做的事。