javascript - 页面 noscroll 在粘性页脚布局中保持 scrollTop 位置

Question

我受不了这样的脑残:当显示高大的弹出窗口时，隐藏页面滚动是一种常见的方法。但是当你设置 overflow: hidden 到 html 和 body 元素时，内容会自动返回到它的顶部 (scrollTop: 0)。保持 scrollTop 位置并在弹出窗口消失时重置它是没有问题的。但是如果你使用透明 mask ，用户会看到从当前滚动位置到顶部的不必要的跳转。如何逃避这个？在当前的 Chrome 和 Firefox 中，我只能将 overflow: hidden 设置为 html 元素以达到我想要的效果，但它不适用于移动设备。也许有人可以提出一个好的跨浏览器解决方案。

Answer 1

我认为这不应该发生。我会查看弹出代码，看看它是否是将页面发送到顶部并使用 subpar css 定位弹出元素的罪魁祸首。

无论如何，这里的代码应该可以应对您遇到的行为。由于我无法重现该问题，因此我无法测试我提出的修复方法。我想您会发现您的弹出窗口会滚出视线。

function keepScroll(){
    var x = $('body').scrollLeft() + $(document.documentElement).scrollLeft();
    var y = $('body').scrollTop() + $(document.documentElement).scrollTop();
    $('html').css({
        'overflow':'hidden'
    });
    $('body').css({
        'overflow':'hidden'
    });

    $(window).scrollTop(y).scrollLeft(x);
}