使用位置时保存滚动位置:固定以防止iphone上的正文滚动

时间:2018-02-21 21:29:59

标签: javascript jquery ios css css3

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

当我在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');
}
&#13;
body.mobile-menu-open {
    position: fixed;
    overflow-y: scroll;
}
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:1)

按照我在iPhone上的预期方式实现这项工作实际上最终只是一个简单的修复:似乎$('html')。scrollTop()不会返回我期望的值。

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