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

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

  • автор:

Как выключить фоновый 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.1k 223 223 золотых знака 79 79 серебряных знаков 222 222 бронзовых знака
ответ дан 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.3.8.5973

Отключение вертикальной прокрутки в div с overflow: auto

Чтобы скрыть вертикальную полосу прокрутки в элементе div с параметром overflow: auto используйте CSS-правила, специфичные для различных браузеров. В браузерах на основе WebKit, к которым относятся Chrome, Safari и Edge, используйте ::-webkit-scrollbar < display: none; >. Для Firefox применяется параметр scrollbar-width: none; . Данные настройки позволяют убрать видимость полосы прокрутки, но при этом сохранить возможность скроллинга с помощью мыши или сенсорного экрана.

Скопировать код

/* Для браузеров на основе WebKit */ .div-no-scrollbar::-webkit-scrollbar < display: none; >/* Для Firefox */ .div-no-scrollbar

Присвойте класс .div-no-scrollbar нужному элементу div , чтобы скрыть полосу прокрутки, не убирая при этом функционал скроллинга.

Установка режима переполнения

Если необходимо обеспечить горизонтальную прокрутку без вертикальной, используйте overflow-x: auto; overflow-y: hidden; . Такое сочетание параметров обеспечивает горизонтальное скроллирование при скрытой вертикальной полосе прокрутки.

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

Бред Ву написал на CSS Tricks статью про блокирование прокрутки основного контента при открытии модального окна — «Prevent Page Scrolling When a Modal is Open».

Прокрутка контента при открытом модальном окне ведёт к плохому пользовательскому опыту, так как после закрытия окна пользователь может оказаться в другом месте страницы. Бред рассматривает несколько вариантов решения этой проблемы. Пример с overflow-y: hidden очень простой, но не работает с мобильной версией iOS. Для блокирования скролла в iOS в статье описывается другой подход с использованием position: fixed и смещением, которое задаётся с помощью JavaScript.

В комментариях к статье пишут, что overflow: hidden для блокирования прокрутки документа работает в iOS 13. Мне стало интересно — нашёл тикет в трекере WebKit. Действительно, баг починили месяц назад. Остаётся подождать, когда большинство пользователей перейдёт на новую версию iOS, и о хаке с fixed можно будет забыть.

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

Бывало у вас такое? Открываете модальное окно, прокручиваете, а после закрытия оказываетесь на странице в позиции, отличающейся от той, с которой его открывали.

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

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

Давайте начнём с чего-нибудь простого

При открытии модального окна можно просто устанавливать элемент body по высоте равным области видимости (viewport) и скрывать вертикальную прокрутку:

body.modal-open

Решение имеет право на существование, но если перед открытием модального окна мы прокрутим элемент body , получим небольшую перерисовку содержимого. Ширина области видимости расширяется приблизительно на 15px, что соответствует ширине полосы прокрутки.

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

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

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

Отлично. А что насчёт мобильных?

Это решение отлично работает как на десктопах, так и на мобильных Android-устройствах. Однако, Safari для iOS требует немного больше внимания, поскольку body всё ещё может прокручиваться, когда модальное окно открыто.

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

body

Работает. Теперь body не будет реагировать на свайпы по экрану. Тем не менее, небольшая проблема всё же остаётся. Если кнопка, открывающая модальное окно, находится внизу страницы и чтобы её увидеть, нужно прокручивать страницу, при нажатии на эту кнопку и открытии модального окна, будет происходить автоматическая прокрутка страницы вверх, что может дезориентировать так же, как и фоновая прокрутка body , от которой мы пытаемся избавиться.

Вот поэтому нам не обойтись без JavaScript

Можем использовать JavaScript, чтобы избежать всплытия события прикосновения к экрану. Все мы знаем, что при открытии модального окна, у него должен быть фоновый слой. К сожалению, в iOS метод stopPropagation() с событиями прикосновения работает немного неуклюже. Но у preventDefault() таких проблем нет. Это значит, что мы должны добавить обработчики событий к каждому DOM-элементу внутри модального окна, а не только к слою подложки или самому модальному окну. Хорошая новость в том, что много JavaScript-библиотек могут делать это, включая старый добрый jQuery.

Ах да, и ещё кое-что. Что если нам нужна прокрутка внутри модального окна? Нам всё ещё нужно вызвать реакцию на событие свайпа, но при достижении верха или низа модального окна, нам всё ещё нужно предотвращать всплытие. Кажется очень сложным (?? так что мы ещё не полностью выкарабкались).

Давайте улучшим фиксированный body

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

body

С помощью JavaScript можно вычислить положение прокрутки страницы, и добавлять это значение в CSS. Благодаря этому body не будет прокручиваться обратно в начальную позицию.

// When the modal is shown, we want a fixed body document.body.style.position = 'fixed'; document.body.style.top = `-$px`; // When the modal is hidden, we want to remain at the top of the scroll position document.body.style.position = ''; document.body.style.top = '';

Данное решение работает, но после закрытия окна всё ещё происходит небольшой сдвиг. А именно, похоже, когда модальное окно открыто и для body задано фиксированное позиционирование, страница уже теряет положение прокрутки. Следовательно, нам нужно восстановить положение. Давайте изменим JavaScript, чтобы учитывать этот момент.

// Когда модальное окно скрыто. const scrollY = document.body.style.top; document.body.style.position = ''; document.body.style.top = ''; window.scrollTo(0, parseInt(scrollY || '0') * -1);

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

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

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