Как запретить скролл при модальном окне
Перейти к содержимому

Как запретить скролл при модальном окне

  • автор:

Как предотвратить прокрутку страницы, при открытом модальном окне

После скроллинга и закрытия модального окна пользователь попадает на совершенно другое место на странице. Потому что содержимое страницы перемещается вслед за скроллингом. Это можно предотвратить с помощью приемов CSS и JavaScript.

Обновлено: 2023-10-17 13:36:36 Наталья Кайда автор материала

Начнем с чего-нибудь простого

Можно помешать перелистыванию станицы при открытом модальном окне, установив высоту модального окна на полную высоту области просмотра и используя overflow-y: hidden при открытом модальном диалоге:

body.modal-open

Но если перед открытием модального окна мы уже перешли к содержимому , то получим небольшое горизонтальное смещение.

Чтобы избежать этого, зададим правый отступ элемента body.

body < height: 100vh; overflow-y: hidden; padding-right: 15px; /* Avoid width reflow */ >

Чтобы все работало, модальное окно должно быть меньше, чем высота области просмотра. Иначе на странице появится полоса прокрутки.

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

Как на счет мобильной версии?

Данное решение отлично работает как на ПК, так и на Android. Но в браузере Safari для iOS не все так гладко. Потому что содержимое страницы все еще прокручивается при открытом модальном диалоге.

В качестве обходного пути можно установить элемент body в position: fixed:

body

Но осталась еще одна маленькая проблема. Предположим, что кнопка открытия modal находится внизу страницы и мы кликаем ее. Но из-за этого мы возвращаемся обратно в верхнюю часть экрана.

Необходимо обратиться к JavaScript

Мы можем использовать JavaScript, чтобы избежать проблемы с событием касания. Метод stopPropagation некорректно работает при обработке касания в устройствах на iOS. Но зато метод preventDefault действует отлично. Это означает, что нам необходимо добавить обработчик событий к каждому узлу DOM модального окна. Это можно реализовать с помощью jQuery.

Улучшим подход с фиксированным элементом body

Вот с чем мы работали:

body

Если мы знаем позицию верхней части прокрутки и используем ее в CSS, тогда элемент body не будет прокручиваться обратно к началу экрана. Для реализации можно применить JavaScript:

// Когда модальное окно открыто, фиксируем элемент body document.body.style.position = 'fixed'; document.body.style.top = `-$px`; // Когда модальное окно скрыто, остаемся в верхней части позиции прокрутки document.body.style.position = ''; document.body.style.top = '';

Но еще осталась одна проблема. На странице изменяется положение скроллинга при открытом диалоге и зафиксированном body. Поэтому нужно восстановить расположение ползунка прокрутки. Чтобы разобраться с проблемой, изменим код JavaScript.

// When the modal is hidden. const top = document.body.style.top; document.body.style.position = ''; document.body.style.top = ''; window.scrollTo(0, parseInt(scrollY || '0') * -1);

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

Как выключить фоновый scrolling при открытии модального окна?

Добавьте css код, что бы при открытом модальном окне отображалась(была доступна) только область внутри открытого элемента, а остальное было скрыто (недостунпно):

body.modal-open

Вот пример кода на CODEPEN (bootstrap + jquery)

Отслеживать
ответ дан 2 ноя 2017 в 20:55
Antons Pavlovs Antons Pavlovs
76 4 4 бронзовых знака

window.onscroll = function()

Отслеживать
ответ дан 2 ноя 2017 в 22:58
user271410 user271410
471 2 2 серебряных знака 11 11 бронзовых знаков
А если в модалке надо будет что-нибудь проскроллить?
3 ноя 2017 в 8:51
У нас тут всё добровольно ) и пока что ваш ответ решает проблему не лучшим образом.
3 ноя 2017 в 12:24

document.body.style.overflow = "hidden"; выключает скролл document.body.style.overflow = ""; включает скролл 

Отслеживать
68.2k 225 225 золотых знаков 80 80 серебряных знаков 223 223 бронзовых знака
ответ дан 6 янв 2022 в 8:58
Евгений Мойсеенко Евгений Мойсеенко
11 1 1 бронзовый знак

window.addEventListener('scroll', (e) => < window.scrollTo(0,0); >);
main < height: 200vh; position: relative; z-index: 1; >.popup < position: absolute; width: 300px; max-height: 150px; background-color: #fff; left: 20px; top: 20px; border: 1px solid; padding: .5em 1em; overflow: auto; >.popup:before
 

غينيا واستمر العصبة ضرب قد. وباءت الأمريكي الأوربيين هو به،, هو العالم، الثقيلة بال. مع وايرلندا الأوروبيّون كان, قد بحق أسابيع العظمى واعتلاء.

غينيا واستمر العصبة ضرب قد. وباءت الأمريكي الأوربيين هو به،, هو العالم، الثقيلة بال. مع وايرلندا الأوروبيّون كان, قد بحق أسابيع العظمى واعتلاء.

غينيا واستمر العصبة ضرب قد. وباءت الأمريكي الأوربيين هو به،, هو العالم، الثقيلة بال. مع وايرلندا الأوروبيّون كان, قد بحق أسابيع العظمى واعتلاء.

غينيا واستمر العصبة ضرب قد. وباءت الأمريكي الأوربيين هو به،, هو العالم، الثقيلة بال. مع وايرلندا الأوروبيّون كان, قد بحق أسابيع العظمى واعتلاء.

Отслеживать
ответ дан 3 ноя 2017 в 12:38
Sasha Omelchenko Sasha Omelchenko
12.8k 4 4 золотых знака 32 32 серебряных знака 62 62 бронзовых знака

Highly active question. Earn 10 reputation (not counting the association bonus) in order to answer this question. The reputation requirement helps protect this question from spam and non-answer activity.

  • javascript
  • jquery
  • css
    Важное на Мете
Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2024 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2024.4.30.8420

Как предотвратить прокрутку страницы, при открытом модальном окне

После скроллинга и закрытия модального окна пользователь попадает на совершенно другое место на странице. Потому что содержимое страницы перемещается вслед за скроллингом. Это можно предотвратить с помощью приемов CSS и JavaScript.

Обновлено: 2023-10-17 13:36:36 Наталья Кайда автор материала

Начнем с чего-нибудь простого

Можно помешать перелистыванию станицы при открытом модальном окне, установив высоту модального окна на полную высоту области просмотра и используя overflow-y: hidden при открытом модальном диалоге:

body.modal-open

Но если перед открытием модального окна мы уже перешли к содержимому , то получим небольшое горизонтальное смещение.

Чтобы избежать этого, зададим правый отступ элемента body.

body < height: 100vh; overflow-y: hidden; padding-right: 15px; /* Avoid width reflow */ >

Чтобы все работало, модальное окно должно быть меньше, чем высота области просмотра. Иначе на странице появится полоса прокрутки.

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

Как на счет мобильной версии?

Данное решение отлично работает как на ПК, так и на Android. Но в браузере Safari для iOS не все так гладко. Потому что содержимое страницы все еще прокручивается при открытом модальном диалоге.

В качестве обходного пути можно установить элемент body в position: fixed:

body

Но осталась еще одна маленькая проблема. Предположим, что кнопка открытия modal находится внизу страницы и мы кликаем ее. Но из-за этого мы возвращаемся обратно в верхнюю часть экрана.

Необходимо обратиться к JavaScript

Мы можем использовать JavaScript, чтобы избежать проблемы с событием касания. Метод stopPropagation некорректно работает при обработке касания в устройствах на iOS. Но зато метод preventDefault действует отлично. Это означает, что нам необходимо добавить обработчик событий к каждому узлу DOM модального окна. Это можно реализовать с помощью jQuery.

Улучшим подход с фиксированным элементом body

Вот с чем мы работали:

body

Если мы знаем позицию верхней части прокрутки и используем ее в CSS, тогда элемент body не будет прокручиваться обратно к началу экрана. Для реализации можно применить JavaScript:

// Когда модальное окно открыто, фиксируем элемент body document.body.style.position = 'fixed'; document.body.style.top = `-$px`; // Когда модальное окно скрыто, остаемся в верхней части позиции прокрутки document.body.style.position = ''; document.body.style.top = '';

Но еще осталась одна проблема. На странице изменяется положение скроллинга при открытом диалоге и зафиксированном body. Поэтому нужно восстановить расположение ползунка прокрутки. Чтобы разобраться с проблемой, изменим код JavaScript.

// When the modal is hidden. const top = document.body.style.top; document.body.style.position = ''; document.body.style.top = ''; window.scrollTo(0, parseInt(scrollY || '0') * -1);

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

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

Привет всем. Сделал модальное окно, но body скролится вместе с ним. Как запретить скролл бади, если модальное окно открыто? Интересует возможность без jq/js.

.modal display: none position: fixed top: 0 left: 0 width: 100% height: 100% background: rgba(0,0,0,0.6) z-index: 2 overflow: hidden &.active display: block &.green .modal-header background: $green a color: $green &.pink .modal-header background: $pink a color: $pink &.blue .modal-header background: $blue a color: $blue &-wrap width: 360px margin: 0 auto background: #fff margin-top: 160px &-header padding: 15px @extend %center font-size: 18px color: #fff position: relative &-content padding: 20px .row @extend %flex @extend %jc-sb @extend %ai-c .form-group height: 40px a, p font-size: 14px a text-decoration: none p @extend %center color: $grey margin-top: 20px
  • Вопрос задан более трёх лет назад
  • 13005 просмотров

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *