Прыгание скролла при открытии модального окна может быть вызвано изменением размера окна или добавлением скрытого контента на страницу, что приводит к изменению высоты контента. В данном ответе представлено несколько методов, которые можно использовать, чтобы предотвратить прыгание скролла при открытии модального окна.
1. Фиксация положения скролла:
При открытии модального окна можно добавить скрытому контейнеру position: fixed, чтобы зафиксировать его положение и предотвратить изменение высоты страницы. Это можно сделать с помощью CSS-правила или изменения свойства через JavaScript.
Пример CSS:
.modal {
position: fixed;
/* Дополнительные стили модального окна */
}
Пример JavaScript:
var modal = document.getElementById('modal');
modal.style.position = 'fixed';
2. Использование overflow: hidden:
Добавление CSS-правила overflow: hidden на элемент <body> предотвратит прокрутку страницы полностью, когда модальное окно открывается.
Пример CSS:
body.modal-open {
overflow: hidden;
}
Пример JavaScript:
var body = document.getElementsByTagName('body')[0];
body.classList.add('modal-open');
Заметьте, что удалять этот класс следует после закрытия модального окна.
3. Использование пустого элемента:
Создайте пустой элемент внизу страницы с помощью CSS или JavaScript. Это позволит избежать изменения размера страницы, поскольку окно будет заполнено пустым элементом.
Пример CSS:
.push {
height: 100vh;
}
Пример JavaScript:
var push = document.createElement('div');
push.classList.add('push');
document.body.appendChild(push);
Затем удалите этот элемент при закрытии модального окна.
Данные методы можно комбинировать или использовать отдельно в зависимости от требований вашего проекта. Обратите внимание, что каждый метод может быть реализован по-разному в различных проектах, поэтому вы можете приспособить их под свои потребности.