javascript - 使用位置 : fixed to prevent body scrolling on iphone 时保存滚动位置

Question

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

当我在 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;
}

Answer 1

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

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