Как при открытии и закрытии меню менять стиль для body?

Question

[Kerrik Солнце]

У меня есть гамбургер-меню, которое открывается слева. Мне мешает скролл заднего фона меню. Я хочу его отключить при открытии гамбургер-меню.

Для этого я хочу, когда гамбургер-меню открыто, для body применить overflow: hidden, height: 100vh. При закрытом меню этих свойств не должно быть.

Как это сделать с помощью js (не на JQuery, я сейчас учу именно js )? Какие события применять (mousedown/mouseon работают не совсем так, как мне нужно)? С помощью CSS я тоже сделать этого не могу, потому что CSS - это каскадная таблица стилей и мы можем применять стили только "сверху вниз". А т.к. в body вложен input, то...
Вот мое меню:


Как это сделать? Мне нужно убрать скролл заднего фона и оставить скролл у самого меню

Answer 1

[JorikArbuzov]

window.disabledScroll = function () { 
    const widthScroll = window.innerWidth - document.body.offsetWidth;
    document.body.dbScrollY = window.scrollY;
    document.body.style.cssText = `
        position: fixed;
        top: ${-window.scrollY}px;
        left: 0;
        width: 100%;
        overflow: hidden;
        hight: 100vh;
        padding-right: ${widthScroll}px;
    `    
    }
    
window.enableScroll = function(){
    document.body.style.cssText = ``;
    window.scroll({top: document.body.dbScrollY})
    }