0
Как запретить прокрутку страницы на 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";
Фиксация элемента на странице
Также мы можем показывать содержимое только в фиксированном полноэкранном контейнере.
<div style="width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; z-index: 999"></div>
Заключение
И так, мы перечислили наиболее популярные способы запретить прокрутку на странице.
