JavaScript onScroll event.preventDefault ()

Question

JavaScript onScroll event.preventDefault ()

1

Есть ли способ использовать preventDefault для события прокрутки? Контейнер должен иметь overflow-y: scroll. Я не хотел бы использовать mousewheel preventDefault, потому что тогда я должен был бы написать решение для мыши, клавиатуры, сенсорные дисплеи и скроллинга.

Итак, как отключить прокрутку в <div> ниже? (jsfiddle)

document.getElementById('container').onscroll = function(event) {
   event.preventDefault();
};

div {
  height: 300px;
  overflow-y: scroll;
  width: 400px;
}

<div id="container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

Vesmy 02 июль 2017, в 20:01

Источник

Теги:

javascript

scroll

preventdefault

1 ответ

Ещё вопросы

Angelos Chalaris · Accepted Answer · 2017-07-02T16-01-00.000Z

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

Рабочая демонстрация

document.getElementById('container').onscroll = function(event) {
   event.preventDefault();
   document.getElementById('container').scrollTo(0,0);
};

div {
  height: 300px;
  overflow-y: scroll;
  width: 400px;
}

<div id="container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

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