Как запретить скролл js

Как запретить прокрутку страницы на 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";

Фиксация элемента на странице

Также мы можем показывать содержимое только в фиксированном полноэкранном контейнере.

Заключение

И так, мы перечислили наиболее популярные способы запретить прокрутку на странице.

Как отключить скроллинг страницы?

Необходимо отключить скроллинг body, скролл бар должен присутствовать просто не работать, при повороте колесика мыши не должно ничего происходить, и при тач событиях, т.е в телефоне тоже скролл не должен работать.

Вопрос задан более трёх лет назад
6780 просмотров

Комментировать

Решения вопроса 3

wapster92

WapSter @wapster92 Куратор тега JavaScript

Как вариант

window.addEventListener('scroll', e => < window.scrollTo() >)

UPD В хроме все норм, но в других браузерах дерганье. Так что надежнее при помощи css, но скролл бар пропадет

Ответ написан более трёх лет назад

Комментировать

Нравится 1 Комментировать

Запретить скролл(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

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»);