Как запретить прокрутку страницы css

Как предотвратить прокрутку страницы при прокрутке дочернего компонента с свойством overflow-y: scroll?

Есть страница, есть всплывающий компонент. В компоненте контента много. Задал max-height: 95vh, и overflow-y: scroll. Но иногда, когда ползунок компонента в крайних положениях, начинает прокручиваться вся страница. А я не хочу. Пробовал onScroll=e.stopPropagination()> — не помогает. Как быть?

Отслеживать
задан 3 мар 2019 в 6:54
149 6 6 бронзовых знаков
Приложите код с вашим вариантом
3 мар 2019 в 13:29

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

Прокрутка страницы может выполнятся самыми разнообразными способами. Ниже представлен пример, предотвращающий прокрутку колёсиком мышки (или устройством заменяющим мышь). Если был достигнут верх блока, а колесо вращается вверх, или если был достигнут низ блока, а колесо вращается вниз, то действие по умолчанию отменяется. Аналогичным образом можно запретить прокрутку блоков с помощью клавиатуры или взмахов на сенсорном экране.

var block = document.getElementById('cc1'); block.addEventListener('wheel', function(event) < if (block.scrollTop == 0 && event.deltaY < 0 || block.scrollTop + block.clientHeight == block.scrollHeight && event.deltaY >0) < event.preventDefault(); >>); 

Отслеживать
ответ дан 3 мар 2019 в 11:38
8,552 4 4 золотых знака 29 29 серебряных знаков 53 53 бронзовых знака

1. почему не слушать «scroll» евент, вместо колесика, клавиатуры и свайпов по отдельности? 2. это же реакт, какие getElementById ?

3 мар 2019 в 13:31

@AlexandrTovmach, из моего понимания задачи нужно избежать только определённого вида прокрутки, а не совсем её заблокировать. Учтите, что событие ‘scroll’ связано только с прокручиваемым элементом. Поэтому когда начинается прокрутка содержимого страницы, уже нельзя понять, чем она вызвана, в каком месте находится курсор, и нужно ли её отменять.

3 мар 2019 в 14:45

По поводу реакта. Я считаю, что лучше предоставить максимально универсальный вариант. Но вы можете преложить решение специализированное для React.

Как остановить прокрутку страницы с помощью CSS

Веб-страницы по умолчанию могут прокручиваться, когда контент находится за пределами экрана. Но иногда возникает необходимость остановить прокрутку страницы для создания фиксированного контента или для других дизайнерских целей. В этой статье мы рассмотрим различные способы остановить прокрутку страницы с помощью CSS.

1. Использование свойства overflow

Одним из самых простых способов остановить прокрутку страницы является использование свойства overflow в CSS. Мы можем установить его значение в hidden, чтобы скрыть содержимое, которое выходит за пределы экрана и предотвратить прокрутку страницы.

body

2. Использование свойства position

Другим способом остановить прокрутку страницы является использование свойства position. Мы можем установить значение fixed для элемента, чтобы сделать его фиксированным, и установить его размеры и позицию в соответствии с нашими потребностями.

.fixed-element

3. Использование свойства touch-action

Если вы хотите остановить прокрутку только на сенсорных устройствах, то можно использовать свойство touch-action. Установите его значение в none, чтобы отключить все действия по прокрутке на сенсорных устройствах.

body

4. Использование свойства overscroll-behavior

Свойство overscroll-behavior позволяет управлять поведением прокрутки внутри элемента. Установите его значение в none, чтобы отключить прокрутку на всех устройствах.

body

5. Использование JavaScript

Если нужно остановить прокрутку страницы с помощью JavaScript, можно использовать следующий код:

document.body.style.overflow = 'hidden'; 

Заключение

В этой статье мы рассмотрели несколько способов остановить прокрутку страницы с помощью CSS. Вы можете выбрать наиболее подходящий способ в зависимости от ваших требований и условий использования.

Похожие статьи

Как остановить прокрутку вверх с помощью CSS

Прокрутка вверх — это эффект, при котором веб-страница автоматически прокручивается вверх после достижения нижней границы. Это может быть удобно для пользователей, чтобы они могли быстро вернуться к н.

Как отключить прокрутку страницы с помощью CSS

Веб-страницы обычно имеют возможность прокрутки, чтобы пользователи могли просмотреть контент, который не помещается на экране. Однако, иногда бывает необходимо отключить возможность прокрутки, чтобы .

Как отключить прокрутку страницы с помощью CSS

В этой статье мы рассмотрим различные способы отключения прокрутки страницы с помощью CSS. Отключение прокрутки может быть полезным в различных ситуациях, когда вы хотите создать фиксированную панель .

Как удалить прокрутку страницы с помощью CSS

Веб-разработчикам часто приходится сталкиваться с ситуацией, когда требуется удалить прокрутку страницы. Например, это может понадобиться при создании модального окна или приложения с фиксированным ра.

Как запретить прокрутку страницы с помощью CSS

Веб-разработчики часто сталкиваются с задачей запрета прокрутки страницы, чтобы создать фиксированный интерфейс или предотвратить случайное прокручивание. В этой статье мы рассмотрим несколько способо.

Как реализовать прокрутку страницы с помощью HTML, CSS и JavaScript

Прокрутка страницы является важным элементом пользовательского интерфейса, который позволяет пользователям просматривать содержимое страницы, когда оно не помещается на экране. В этой статье мы рассмо.

css. Запрет скроллинга страницы без потери управляемости скроллбара

Товарсчи, есть ли возможности в css для того чтобы запретить прокрутку всей страницы, но при этом скроллбар не исчезал, а наоборот продолжал работать, но для другого элемента в документе. Пример можно посмотреть в диалогах в вк, там основной скролл работает, но крутит оно блок диалога а не весь сайт.

Отслеживать
BadProgrammer
задан 6 фев 2018 в 22:58
BadProgrammer BadProgrammer
103 9 9 бронзовых знаков

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

Только через css нельзя, можно создать иллюзию как в ВК. Там как раз таки «весь сайт» и прокручивается, а сайдбары, шапка и другие элемент просто зафиксированы через fixed или sticky Второй вариант, это делать основному контенту oferflow:hidden, а другой элемент растягивать на всю ширину и ему уже делать overflow:scroll или auto, но я так понимаю, это не тот случай.

Отслеживать
ответ дан 7 фев 2018 в 4:59
146 2 2 бронзовых знака
а с помощью css + js есть идеи?
7 фев 2018 в 6:05

Нужно что-то типа такого?

body < margin:0; >header < position:fixed; top:0; left:0; width:100%; height:50px; background-color:green; >aside < height:calc(100vh - 50px); width:100px; position:fixed; top:50px; left:0; background-color:blue; >main

Отслеживать
ответ дан 7 фев 2018 в 8:12
10.4k 2 2 золотых знака 14 14 серебряных знаков 36 36 бронзовых знаков

Важное на Мете

Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Горизонтальная прокрутка CSS: определение и как убрать на всех разрешения

Главный недостаток горизонтального скролла — в веб-версиях сайтов он смотрится «не очень» , п лю с п ользователи компьютеров и ноутбуков неохотно им пользуются. Из-за этого вокруг горизонтального скролла царит облако негатива , и поисковые системы жестко определили свою позицию.

Другое дело, когда горизонтальный скролл применяется в мобильных версиях веб-ресурсов. Копаясь в телефоне, удобно скроллить определенный контент «в сторону». Однак о г оризонтальный скролл оправдывается, когда реализован в отдельных блоках для удобства пользователя. Если, опять же , скроллится вся страница веб-сайта — это плохо.

Горизонтальный скролл CSS: особенности

1. В веб-версиях ресурса он не заметен. Если организовать горизонтальный скролл в веб-версии сайта, тогда нужно быть готовым к тому, что пользователи будут не замечать его или просто игнорировать. Поэтому, если он организован специально, не нужно размещать важную информацию таким образом.
2. Поисковые системы к горизонтальному скроллу относятся с презрением. Пользователям десктопных устройств не нравится скроллить «в сторону». Это не удобно. Поэтому поисковые системы пошли им навстречу и не рекомендуют использовать такой вид скролла на веб-ресурсе.
3. В мобильной версии веб-сайт а г оризонтальный скролл позволяет компактно размещать однообразную информацию в пределах определенного блока. Например , товары одной категории в интернет-магазине. Допустим , у вас есть несколько важных категорий то ва ра, которые вы хотите разместить в начале страницы. В этом случае вы размещаете категории вертикально друг под дру гом , а товар в них размещаете так , чтобы он скроллился горизонтально.
4. Горизонтальный скролл экономит много места на небольших экранах. При этом он не сильно нагружает страницу, если сравнивать с вариантом вертикального расположения всего контента.

Как убрать горизонтальный скролл с помощью CSS

Прежде чем убрать горизонтальную прокрутку возможностями CSS , давайте выясним , из-за чего она появляется. Рассматриваем тот случай, когда горизонтальный скролл появился «случайно», а не был сделан специально.

Горизонтальная прокрутка появляется в том случае, когда какой-то элемент «выходит» за область видимости контента страницы. У начинающих верстальщиков и веб-разработчиков это довольно частое явление. Чтобы избавит ь ся от горизонтальной прокрутки , нужно «выскочивший» элемент «загнать» в область видимости или удалить. Если удалось «поправить» такой элемент, тогда хорошо. Если нет, потому что вы не можете его найти, тогда есть проверенное CSS-свойство «overflow».

Как убрать горизонтальный скролл в html, используя CSS-свойство «overflow»

• overflow-х — свойство, отвечающее за горизонтальную прокрутку;
• overflow-у — свойство, отвечающее за вертикальную прокрутку.

Заключение

Сегодня вы узнали, что такое горизонтальная прокрутка и как ее можно специально использовать. Если же она возникла случайно, тогда есть проверенный способ, как убрать горизонтальный скролл возможностями CSS — использовать свойство «overflow».

Горизонтальная прокрутка не рекомендована к использованию , о днак о в отдельных случая х б ез нее никак не обойтись. Поэтому , прежде чем ее создавать или удалять, нужно тщательно все обдумать.

Мы будем очень благодарны

если под понравившемся материалом Вы нажмёте одну из кнопок социальных сетей и поделитесь с друзьями.