0

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

1
  • Приложите код с вашим вариантом 3 мар 2019 в 13:29

1 ответ 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
  • 1
    1. почему не слушать "scroll" евент, вместо колесика, клавиатуры и свайпов по отдельности? 2. это же реакт, какие getElementById? 3 мар 2019 в 13:31
  • @AlexandrTovmach, из моего понимания задачи нужно избежать только определённого вида прокрутки, а не совсем её заблокировать. Учтите, что событие 'scroll' связано только с прокручиваемым элементом. Поэтому когда начинается прокрутка содержимого страницы, уже нельзя понять, чем она вызвана, в каком месте находится курсор, и нужно ли её отменять.
    – mymedia
    3 мар 2019 в 14:45
  • 1
    По поводу реакта. Я считаю, что лучше предоставить максимально универсальный вариант. Но вы можете преложить решение специализированное для React.
    – mymedia
    3 мар 2019 в 14:45

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.