禁用元素上的身體滾動

Question

我在屏幕的右下方創建了一個浮動的粘性引導面板。 看起來像對講機這樣的聊天支持。 當我在面板上滾動時，主體也會滾動。 當我在移動設備上滾動時，這真的很奇怪，因為我以全屏方式顯示面板，並且當面板處於全屏狀態時我們可以在身體上滾動。

所以我在JS中放入了一些代碼來啟用/禁用主體滾動條：

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

我認為它有效並且過大，但我沒有發現更好的選擇。 但是我還有另一個問題。 如果我繼續使用手機，則在全屏面板上滾動瀏覽器時，Chrome地址欄將被隱藏，這非常丑陋，因為每次都會重新繪制該面板。

您是否知道一種更好的方法，當光標位於某些元素上時（禁用CSS屬性），禁用正文滾動並禁用瀏覽器的自動隱藏地址欄？

如果您使用手機進行對講 ，那正是我想要的。

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，因為僅主體是不夠的。 希望能幫助到你。