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

Question

我受不了这样的脑残：当显示高大的弹出窗口时，隐藏页面滚动是一种常见的方法。但是当您将 overflow: hidden 设置为 html 和 body 元素时，内容会自动 returns 到它的顶部（scrollTop：0）。保持 scrollTop 位置并在弹出窗口消失时重置它是没有问题的。但是如果你使用透明遮罩，用户会看到从当前滚动位置到顶部的不必要的跳转。如何逃避这个？在当前的 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);
}

Answer 2

恶心的页脚布局 html 和正文高度等于“100%”。当您设置 overflow:hidden 时，它会裁剪所有内容并 returns 它到顶部位置。为避免这种情况，如果存在滚动，则应将 html 和正文高度设置为 'auto'（您应检查它以保持粘性页脚行为）

function keepScroll(){
    var scrollHeight = $('body')[0].scrollHeight > $('html')[0].scrollHeight ? $('body')[0].scrollHeight : $('html')[0].scrollHeight,
    keepCSS = scrollHeight > $(window).height() ? {'overflow':'hidden','height':'auto'} :  {'overflow':'hidden'};      
    $('html, body').css(keepCSS);
}

查看 fiddle，了解现场演示

编辑 1 此解决方案仍然无法在移动设备上运行（溢出：隐藏不会禁用 iPad 上的滚动，正文的位置 '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(style)等。在 iPhone 和 Ipad (iOS 8+) 上测试。 fiddle http://jsfiddle.net/m1eav032/5/

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

Page noscroll keeping scrollTop position in sticky footer layout

html

javascript

css

popup