Запрет прокрутки при открытии модального окна

Одной из проблем реализации модальных окон является прокрутка контента под модальным окном. Как правило модальные окна находятся в фиксированной позиции, не препятствуя работе с остальным содержимым документа.

Как предотвратить прокрутку контента под модальным окном и сохранить позицию прокрутки над элементом на котором произошёл вызов модального окна, поможет Java-script код указанный ниже:


// Кода показывается модальное окно
// фиксируем боди и запоминаем позицию скролла
document.body.style.position = 'fixed';
document.body.style.top = `-${window.scrollY}px`;



// Кода модальное окно скрывается
// убираем фиксацию боди и восстанавливаем позицию скролла
const scrollY = document.body.style.top;
document.body.style.position = '';
document.body.style.top = '';
window.scrollTo(0, parseInt(scrollY || '0') * -1);


Теперь body не будет прокручиваться при открытом модальном окне, а положение прокрутки сохраняется и при открытии и при закрытии модального окна.