Как скрыть скролл в модальном окне при отображении

Чтобы устранить появление полос прокрутки в модальном окне, нужно управлять свойством overflow у элементов, отвечающих за прокрутку контейнера и тела страницы. Основная идея заключается в отключении прокрутки страницы при открытом модальном окне и восстановлении её после закрытия.

Основное решение – управление свойствами overflow

При открытии модального окна добавьте в body класс, который отключает прокрутку:

document.body.classList.add('modal-open');

И в CSS определите, что для этого класса отключается скроллинг:

.modal-open {
overflow: hidden;
padding-right:  scrollbar_width;
}

Это полностью блокирует прокрутку всей страницы, не повреждая внутренний контент модального окна.

Поддержка при нефиксированном положении контента

Чтобы избежать сдвига страницы при исчезновении полос прокрутки, добавьте padding-right, равный ширине полоски:

const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
document.body.style.paddingRight = `${scrollbarWidth}px`;

Это предотвращает дребезжание макета при исчезновении полосы прокрутки.

Как правильно реализовать

1. Создайте класс для отключения прокрутки, например, modal-open.
2. При открытии модального окна:
• Добавьте класс к тегу body.
• Вычислите ширину полоски прокрутки и добавьте ее в padding.
3. При закрытии – удалите класс и сбросьте padding.

function openModal() {
const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
document.body.classList.add('modal-open');
document.body.style.paddingRight = `${scrollbarWidth}px`;
}
function closeModal() {
document.body.classList.remove('modal-open');
document.body.style.paddingRight = '';
}

Особенности при использовании CSS-переходов

Если применяются CSS-переходы, убедитесь, что изменение overflow происходит без сбоев, и переходы выглядят плавно. Для этого настройте transition в стилях:

body {
transition: padding-right 0.3s ease;
}

Дополнительные советы

• Используйте фиксированные размеры для модального окна, чтобы избежать сдвигов при изменении прокрутки.
• Применяйте обработчики событий, чтобы автоматизировать добавление и удаление классов при открытии и закрытии.
• Проверяйте работу на разных браузерах, так как ширина полоски прокрутки может отличаться.