Курсы 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
Конечно же, если зажать клавишу, то все таки проскачет, это нормально.
Насчет телефонов я думаю не особо будет замудоны с эффектами, дабы у них еще не выросла такая поддержка как у браузеров на ПК.
Как запретить скролл не ставя overflow:hidden
Как оставить полосу прокрутки и при этом запретить скролл на странице? Открывается модалка, и при этом, чтобы не было скролла всему html, который выше в несколько раз окна браузера, добавляется overflow:hidden, но при этом получается эффект прыгания по горизонтали из за того что полоса прокрутки то появляется, то исчезает. Как запретить скролл фона модалки не добавляя overflow:hidden, то есть оставив полосу прокрутки?
html < position:relative; margin:0 auto; /*overflow:hidden; - не нужно использовать*/ height:100vh; width:100%; >html body:after < content:''; background-color:rgba(0, 0, 0, 0.5); position:fixed; top:0; left:0; right:0; bottom:0; z-index:9; >modal
modal
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3UPD: Должна остаться функция скролла внутри модалки. И нельзя потерять позицию в основном контенте при открытии модалки, поэтому position:fixed не подходит.
Как предотвратить прокрутку страницы, при открытом модальном окне
После скроллинга и закрытия модального окна пользователь попадает на совершенно другое место на странице. Потому что содержимое страницы перемещается вслед за скроллингом. Это можно предотвратить с помощью приемов 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 больше не прокручивается при открытом модальном окне, а положение скроллинга сохраняется.
Запретить скролл(scroll) на css и jquery
Как же все таки убрать полосы прокрутки полосу прокрутки, и запретить скролл(scroll) на сайте при помощи css или js когда нам она не нужна, например при отображении того же попап окна (popup window) или любого другого всплывающего элемента на странице (рекламы). Решение можно реализовать на jQuery так:
Запретить скролл:
$(«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»);
Поделись с друзьями:
Комментарии к записи Запретить скролл(scroll) на css и jquery отключены
Нет комментариев для записи Запретить скролл(scroll) на css и jquery