在iPhone上使用position:fixed防止页面滚动时如何保存滚动位置

Question

我想做的是，当移动菜单打开时，使主体内容无法滚动，但页面位置被保存，当主体内容的位置变为固定值后再次取消固定值时，用户不会失去在页面上的位置。
以下代码在Chrome dev-tool的iphone模拟器中运行良好，但在我实际的iPhone SE（使用Chrome和Safari浏览器）上不起作用。有没有人能解释一下为什么呢？

function storeBodyScroll() {
    var scrollpos = $('html').scrollTop();
    $('body').css({top: -scrollpos});
}

function closeMenu() {
    // See if the body's scroll position is being held
    var scrollpos = parseInt($('body').css('top'), 10);

    $('body').removeClass('mobile-menu-open');

    // Scroll to it if it is and remove held position
    if (!!scrollpos && scrollpos < 0) {
        $('html').scrollTop(-scrollpos);
        $('body').css({top:0});
    }
}

function openMenu() {
    storeBodyScroll();
    $('body').addClass('mobile-menu-open');
}

body.mobile-menu-open {
    position: fixed;
    overflow-y: scroll;
}

- AAlleavitch

---

虽然我无法为您当前的问题提供解决方案，但我可以提供一个潜在的替代方案，即在菜单打开时将您的 body 设置为 overflow: hidden，默认情况下设置为 overflow: auto;。也许它会有所帮助，也许不会，无论如何，祝你好运。 - chriskirknielsen

虽然这解决了不丢失滚动位置的问题，但不幸的是，在 iPhone 上，这会导致移动菜单后面的正文仍然可以滚动。 - AAlleavitch

如果您还将pointer-events:none;添加到body(并确保您的菜单有pointer-events:auto;)，那么这种情况是否仍会发生呢？在这里试图解决问题... - chriskirknielsen

Answer 1

在 iPhone 上实现我预期的功能实际上是一个简单的修复：看起来 $('html').scrollTop() 没有返回我期望的值。
相反，我用 $(window).scrollTop() 替换了 $('html').scrollTop()，并用 window.scrollTo(0,scrollpos) 替换了 $('html').scrollTop(-scrollpos)。

- AAlleavitch