Как предотвратить прокрутку страницы, при открытом модальном окне
После скроллинга и закрытия модального окна пользователь попадает на совершенно другое место на странице. Потому что содержимое страницы перемещается вслед за скроллингом. Это можно предотвратить с помощью приемов CSS и JavaScript.
Начнем с чего-нибудь простого
Можно помешать перелистыванию станицы при открытом модальном окне, установив высоту модального окна на полную высоту области просмотра и используя overflow-y: hidden при открытом модальном диалоге:
body.modal-open
Но если перед открытием модального окна мы уже перешли к содержимому , то получим небольшое горизонтальное смещение.
Чтобы избежать этого, зададим правый отступ элемента body.
body < height: 100vh; overflow-y: hidden; padding-right: 15px; /* Avoid width reflow */ >
Чтобы все работало, модальное окно должно быть меньше, чем высота области просмотра. Иначе на странице появится полоса прокрутки.
Как на счет мобильной версии?
Данное решение отлично работает как на ПК, так и на 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 больше не прокручивается при открытом модальном окне, а положение скроллинга сохраняется.
Курсы javascript
подскажите, как запретить скроллинг всей страницы? прокрутка будет реализована вот так http://tympanus.net/Tutorials/Websit. _vertical.html и нужно исключить другие способы прокрутки страницы — колесиком мыши, клавишами вврех-вниз.
31.07.2012, 13:08
без статуса
Регистрация: 25.05.2012
Сообщений: 8,219
ivan2006bip,
Так — не пойдёт ?
html,body
31.07.2012, 13:25
Регистрация: 21.04.2012
Сообщений: 951
Deff,
стрелками можно крутить
31.07.2012, 13:40
Регистрация: 28.03.2011
Сообщений: 5,418
немало кодотруда получится, и из-за такой мелочи. а потом ещё в IE надо посмотреть будет. зачем оно вам?
31.07.2012, 15:52
Регистрация: 22.03.2012
Сообщений: 3,744
Если поместитить в , то проблема вроде решается
31.07.2012, 16:01
Регистрация: 06.05.2012
Сообщений: 48
Dim@,
а кто не позволяет считать keycode и вернуть браузеру false?
Окончательно вариант решения такой:
html,body
document.body.onkeydown = function(e)< e = e || window.event; var c = e.keyCode; //Убирает эвент на стрелках, на pageDown, PageUp, Home, End if(c>36 && c32 && c
Конечно же, если зажать клавишу, то все таки проскачет, это нормально.
Насчет телефонов я думаю не особо будет замудоны с эффектами, дабы у них еще не выросла такая поддержка как у браузеров на ПК.
Как запретить прокрутку страницы на JS и CSS?
Отключить событие scroll в Js и CSS мы к сожалению не можем, но мы можем «Имитировать» отключение прокрутки, когда необходимо сфокусировать внимание пользователя на определенной части web-страницы. И в этой статье мы расскажем вам, как это можно сделать.
Методы отключения скролла
Существует 3 способа отключить прокрутку на странице:
- При помощи события js (onscroll)
- При помощи добавления css свойства через js
- При помощи фиксации элемента на странице
Сейчас мы подробнее разберем эти методы.
С помощью события — onscroll в js
При событии onscroll можно получать и изменять состояние прокрутки страницы.
Из этого следует то, что мы можем помещать оконную видимость экрана на любую позицию страницы. То есть, если пользователь захочет проскроллить мы вернем его в прошлое состояние.
window.onscroll = () => < window.scroll(0, 0); >;
Добавления css свойства при помощи js
Этот способ отличается тем, что мы скрываем все элементы страницы за пределами видимой области экрана.
document.body.style.overflow = "hidden";
Фиксация элемента на странице
Также мы можем показывать содержимое только в фиксированном полноэкранном контейнере.
Заключение
И так, мы перечислили наиболее популярные способы запретить прокрутку на странице.
Читайте также:
Понимание объектов и функций JavaScript
Обработка форм в React
Css анимации текста на примере
EvgeniyaPronina / no scroll
Убрать полосы прокрутки полосу прокрутки, и запретить скролл(scroll) на сайте при помощи css или js когда нам она не нужна, например при отображении того же попап окна (popup window) или любого другого всплывающего элемента на странице (рекламы).
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
| //Запретить скролл: |
| $(«html,body»).css(«overflow»,»hidden»); |
| //или только вертикальный скролл: |
| $(«body»).css(«overflow-y»,»hidden»); |
| //и на css: |
| position:fixed;overflow:hidden |
| //Запретить scroll на чистом JS можно так: |
| document.body.style.overflow = ‘hidden’; |
| //Убрать скроллинг на IPAD можно так: |
| document.body.addEventListener(‘touchmove’,function(event),false); |
| //на jQuery: |
| $(document).bind(‘touchmove’, false); |
| //P.S: Данный способ не работает на мобильных устройства, так как там используется точпад, по этому необходимо для body применять свойство position:fixed; пример: |
| создаем сам класс |
| .fixed |
| position:fixed; /*позицианируем чтобы исчез скролл*/ |
| width:100%; /*что бы верстка не складывалась по ширине*/ |
| > |
| //Применяем когда нам это необходимо |
| $(«body»).addClass(«fixed»); |
| //и убираем его когда нужно сновa включить прокрутку |
| $(«body»).removeClass(«fixed»); |