Как запретить скролл не ставя 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
Чтобы отключить скролл страницы в CSS, можно использовать свойство overflow для задания свойства hidden . Это свойство скрывает любой контент, который выходит за границы родительского элемента.
Например, если вы хотите отключить скролл на всей странице, вы можете добавить следующее правило в свой CSS файл:
body overflow: hidden; > Это скроет скролл на странице, но также отключит и возможность прокрутки страницы. Если вы хотите отключить скролл только для определенного элемента, вы можете применить этот стиль к этому элементу:
.container overflow: hidden; > Здесь мы применяем свойство overflow: hidden к элементу с классом container . Это скроет все контент, который выходит за границы элемента с классом container .
Если вы хотите отключить только горизонтальный или вертикальный скролл, вы можете использовать свойства overflow-x и overflow-y . Например:
body overflow-x: hidden; /* отключает горизонтальный скролл */ overflow-y: scroll; /* включает вертикальный скролл */ > В этом примере мы отключаем горизонтальный скролл и включаем только вертикальный скролл на странице.
Как запретить прокрутку страницы на 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»); |