在 Safari 中禁用/覆盖来自 popstate 事件的锚点跳转

Question

这让我发疯。如果您在同一页面上使用锚点进行导航，则在调用 popstate 时，浏览器会自然地将您 back/forward 带到您历史记录中 link 的位置。

假设您可以通过 e.preventDefault(); 像在单击事件中那样禁用散列跳转； - 但到目前为止情况并非如此。

在大多数现代浏览器中，我已经能够通过存储 $(window).scrollTop(); 之类的内容来破解覆盖。在一个变量中并在 popstate 中调用它：$window.scrollTop(somevar);

但是在 Safari 中，此解决方法会导致在重新定位到指定的 scrollTop 之前原始锚点位置快速闪烁或闪烁 - 这使其成为非解决方案

在尝试了各种想法之后，似乎实现我需要的唯一方法是找到一种方法让 Safari 像 Chrome 或 FF 那样对待这些锚点，或者以某种方式完全禁用它们popstate 的想法。

这是前面提到的覆盖示例（适用于 chrome、FF 等）

var scrollY;

$(window).on('scroll', function(e) {
    scrollY = $window.scrollTop();
});

$(window).on('popstate', function(e) {
    // some other page location, not the history #hash
    $(window).scrollTop(scrollY);
});

Answer 1

已解决

据我所知，没有明显的方法可以做到这一点，所以我把时间花在了变通方法上。我没有试图停止散列，而是通过暂时固定容器位置+当前滚动位置然后在页面转换功能完成后删除调整来达到预期效果。

var scrollY;

$(window).on('scroll', function(e) {
    scrollY = $window.scrollTop();
});

$(window).on('popstate', function(e) {
    $(window).scrollTop(scrollY);
    $('.container').css({
        'position': 'fixed',
        'top': '-'scrollY+'px'
    });
    yourFunction(); // contains animation sequence / css removal
});

在 Safari 中禁用/覆盖来自 popstate 事件的锚点跳转

Disable / override anchor jump from a popstate event in Safari

html

javascript

safari

jquery

html5-history