Question

我在屏幕的右下角创建了一个浮动的粘性引导面板。看起来像intercom这样的聊天支持。当我在面板上滚动时，主体也会滚动。当我在移动设备上滚动时，这真的很奇怪，因为我以全屏方式显示面板，并且当面板处于全屏状态时我们可以在身体上滚动。

因此，我将代码片段放入JS中以启用/禁用主体滚动条：

    if (...) {
        $('body').css('overflow', 'hidden');
    } else {
        $('body').css('overflow', 'scroll');
    }
    ...

它可以正常工作，但我认为它是过大的，但我发现没有更好的选择。但是我还有另一个问题。如果我继续使用手机，则在全屏面板上滚动浏览器时，Chrome地址栏将被隐藏，这非常丑陋，因为每次都会重新绘制该面板。

您是否知道一种更好的方法，当光标位于某个元素上时禁用主体滚动（魔术css属性？）并禁用浏览器的自动隐藏地址栏？

如果您用手机继续intercom，那正是我想要的。

Answer 1

如果您需要完全启用或禁用滚动，则必须使用以下方式：

if (...) {
    $('html, body').css({ overflow: 'hidden', height: '100%' }); // to hide
} else {
    $('html, body').css({ overflow: 'auto (or) scroll', height: 'auto' }); // to show
}

您必须包含html，因为仅主体是不够的。希望对您有所帮助。

禁用元素上的身体滚动

1 个答案: