Javascript 页面不滚动在粘性页脚布局中保持滚动顶部位置

我对付不了这样一个心碎的人： 当一个高大的弹出窗口出现时，隐藏页面滚动是常见的方法。但是当您将

overflow:hidden

设置为html和body元素时，内容会自动返回到其顶部（scrollTop:0）。保持scrollTop位置并在弹出窗口消失时重置它是没有问题的。但若使用透明遮罩，用户将看到不必要的从当前滚动位置跳到顶部。如何逃避这一点？ 在当前的Chrome和Firefox中，我可以仅将

overflow:hidden

设置为html元素以达到我想要的效果，但它在移动设备上不起作用。

---

也许有人可以提出一个好的跨浏览器解决方案。

我认为这不应该发生。我会查看弹出代码，看看它是否是将页面发送到顶部并使用子栏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);
}

---

病态页脚布局的html和身体高度等于“100%”。当您设置溢出：隐藏时，它将裁剪所有内容并将其返回到顶部位置。 为了避免这种情况，如果存在滚动，您应该将html和正文高度设置为“自动”（您应该选中它以保持粘性页脚行为）

请参阅，以获取实时演示

编辑1 这个解决方案在移动设备上仍然不起作用（溢出：hidden没有禁用iPad上的滚动，body的位置“fixed”修复将内容抛出顶部），因此问题仍然存在

编辑2 为手机找到解决方案。也许它不是很干净，但很管用

var scrollKeeper = (function() {
    var scrollHeight = $('body')[0].scrollHeight > $('html')[0].scrollHeight ? $('body')[0].scrollHeight : $('html')[0].scrollHeight,
        keepCSS = scrollHeight > $(window).height() ? {'overflow':'hidden','height':'auto'} :  {'overflow':'hidden'},
        scrollTop = 0;
    return {
        keep : function() {
            scrollTop = $(window).scrollTop();
            $('body').css({'position': 'fixed', 'width':'100%', 'top': -scrollTop + 'px'});    
            $('html, body').css(keepCSS);
        },
        release : function() {
            $('html, body').removeAttr('style').scrollTop(scrollTop);
        }
    }
})();

提示：当然，在实际开发中，您应该使用css类来避免removeAttr（样式）等。 在iPhone和Ipad（iOS 8+）上测试。

---

小提琴

谢谢你的回答。当我在小提琴上使用你的密码时，我注意到了罪犯。我的问题是粘性页脚布局，它将html和身高设置为100%。因此，结论是检查滚动是否存在，如果存在，则将html、身高更改为“自动”。而且不需要保存滚动位置变量。看小提琴，谢谢你发布你的补丁。

var scrollKeeper = (function() {
    var scrollHeight = $('body')[0].scrollHeight > $('html')[0].scrollHeight ? $('body')[0].scrollHeight : $('html')[0].scrollHeight,
        keepCSS = scrollHeight > $(window).height() ? {'overflow':'hidden','height':'auto'} :  {'overflow':'hidden'},
        scrollTop = 0;
    return {
        keep : function() {
            scrollTop = $(window).scrollTop();
            $('body').css({'position': 'fixed', 'width':'100%', 'top': -scrollTop + 'px'});    
            $('html, body').css(keepCSS);
        },
        release : function() {
            $('html, body').removeAttr('style').scrollTop(scrollTop);
        }
    }
})();