Как убрать прыгание скролла при открытии модального окна?
При открытии модалки когда h100vh становится, то скролл убирается и соответственно страница смещается.
Я знаю есть какое-то css свойство для скрола которое вешается на html, чтобы он как будто не пропадал, через баяны на js с оффсет падингами писать не хочу.
Дополнительно:
https://doka.guide/css/scrollbar-gutter/
Это если нужно заблокировать и скрыть скролл и чтобы модалка не дёргалась при открытии/закрытии.
Если на скролл при открытой модалке всё равно, то подойдёт банальный overflow: scroll, как советуют ниже.
overflow: scroll сделает скроллбар всегда видимым, даже когда нет переполнения
- я кстати не удивлюсь если он не отметит это решением, так как он привык динамить большинство ответов и комментов которые ему пишут)
жаль на хабре нет функции - "голосование за бан аккаунта"
- szQocks, есть небольшой костыль, в виде расширения под хром https://github.com/MarisKori/Toster-Comfort
- szQocks, Отметить решением можно и без автора. Либо пользователи проголосуют (три или пять человек, не помню), либо кураторы. Так что пофиг.
- Михаил Р., глянул, там даже хонор есть) вхаха) но пожалуй устанавливать себе его не буду, 1 минуту уж могу как-то потратить и сам, на то что бы проанализировать чей-то профиль) учитывая что делаю это не часто)
Сергей delphinpro, не знал что простые юзеры могут выбрать решением ( точнее знал, но думал что ответ решением принят не будет ), отметил.
- szQocks, обиделся?
Вот тут был вопрос
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы убрать прыгание скролла при открытии модального окна, можно использовать следующий подход:
1. Установите свойство `overflow: hidden;` для элемента `body` в момент открытия модального окна. Это предотвратит прокрутку контента на заднем плане при открытии модального окна.
```html
body.modal-open { overflow: hidden; }
```
2. Добавьте класс `modal-open` к элементу `body` при открытии модального окна и удалите его при закрытии.
```html
function openModal() { document.body.classList.add('modal-open'); } function closeModal() { document.body.classList.remove('modal-open'); }function openModal() { document.body.classList.add('modal-open'); } function closeModal() { document.body.classList.remove('modal-open'); }
```
3. Убедитесь, что вы правильно настроили размер модального окна и его позиционирование, чтобы избежать прокрутки контента внутри модального окна.
Применение этих шагов поможет вам избежать прыгания скролла при открытии модального окна и обеспечит более плавное пользовательское взаимодействие.