Есть страница, есть всплывающий компонент. В компоненте контента много. Задал max-height: 95vh, и overflow-y: scroll. Но иногда, когда ползунок компонента в крайних положениях, начинает прокручиваться вся страница. А я не хочу. Пробовал onScroll={(e)=>e.stopPropagination()} - не помогает. Как быть?
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();
}
});
-
11. почему не слушать "scroll" евент, вместо колесика, клавиатуры и свайпов по отдельности? 2. это же реакт, какие
getElementById
? 3 мар 2019 в 13:31 -
@AlexandrTovmach, из моего понимания задачи нужно избежать только определённого вида прокрутки, а не совсем её заблокировать. Учтите, что событие 'scroll' связано только с прокручиваемым элементом. Поэтому когда начинается прокрутка содержимого страницы, уже нельзя понять, чем она вызвана, в каком месте находится курсор, и нужно ли её отменять.– mymedia3 мар 2019 в 14:45
-
1По поводу реакта. Я считаю, что лучше предоставить максимально универсальный вариант. Но вы можете преложить решение специализированное для React.– mymedia3 мар 2019 в 14:45