使用位置时保存滚动位置：固定以防止在 iphone 上滚动答案

【问题标题】：Saving scroll position while using position: fixed to prevent body scrolling on iphone使用位置时保存滚动位置：固定以防止在 iphone 上滚动
【发布时间】：2018-02-21 21:29:58
【问题描述】：

我想要做的是让它在移动菜单打开时不再可滚动，但页面上的位置被保存，这样当身体的位置变得固定和不固定时用户不会失去他们在页面上的位置。

当我在 Chrome 开发工具的 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;
}

【问题讨论】：

虽然我无法为您当前的问题提供解决方案，但我可以提供一个潜在的替代方案，即在您的菜单打开时将您的 body 设置为 overflow: hidden，默认情况下设置为 overflow: auto; .也许它会有所帮助，也许没有，无论如何，祝你好运。
虽然这确实解决了不丢失滚动位置的问题，但不幸的是，在 iphone 上，这导致正文仍然可以在我的移动菜单后面滚动。
如果您还将pointer-events: none; 添加到body（并确保您的菜单有pointer-events: auto;），是否还会发生这种情况？在这里拉稻草......

标签： javascript jquery ios css

【解决方案1】：

按照我在 iphone 上的预期方式进行这项工作实际上最终得到了一个简单的修复：似乎 $('html').scrollTop() 没有返回我期望的值。

相反，我将 $('html').scrollTop() 替换为 $(window).scrollTop()，并将 $('html').scrollTop(-scrollpos) 替换为 window.scrollTo(0,scrollpos) .

【讨论】：