Как убрать скролл body при открытом модальном окне?

Question

[Kalerss]

Доброго времени суток, задача состоит в том, чтобы при открытой модалке body был зафиксирован

js:

const modalMenu = document.getElementById("modal_menu");
const openMenu = document.getElementById("modal_menu__open");
const closeMenu = document.getElementsByClassName("modal_menu__close")[0];
openMenu.onclick = function() {
  modalMenu.style.display = "block";
}
closeMenu.onclick = function() {
  modalMenu.style.display = "none";
}
window.onclick = function(event) {
  if (event.target == modalMenu) {
    modalMenu.style.display = "none";
  }
}

Answer 1

[Андрей Мартынкевич]

Добавив следующую строку: document.body.style.overflow = 'hidden';
А при закрытии устанавливать overflow = 'visible'

Comments

[Kalerss]

Спасибо, сработало! А как можно добавить прокрутку в самом модальном?

[Андрей Мартынкевич]

Kalerss, Ограничив высоту блока в котором находится контент + указав css свойство overflow = 'scroll'(Например высота блока в котором находится контент 150px,тогда если контент будет больше 150px,то у блока появится скролл)

[imko]

Kalerss, можешь ещё для красоты считать ширину скроллбара и ставить во время блока прокрутки такой же боковой паддинг для боди, чтоб не дергалось

[Сергей delphinpro]

Андрей Мартынкевич,

А при закрытии устанавливать overflow = 'visible'

Лучше вернуться к значению, установленному в css
overflow = '' // пустая строка

указав css свойство overflow = 'scroll'

Лучше авто, иначе скролл будет всегда, даже если он не нужен
overflow = 'auto'