article.md

Прокрутка

Подія scroll дозволяє реагувати на прокручування сторінки або елемента. Є багато цікавих речей, які при цьому можна зробити.

Наприклад:

• Показати/приховати додаткові елементи керування або інформацію залежно від того, де в документі перебуває користувач.
• Завантажити більше даних, коли користувач прокрутить сторінку вниз до кінця.

Ось невелика функція для відображення поточного прокручування:

window.addEventListener('scroll', function() {
  document.getElementById('showScroll').innerHTML = window.pageYOffset + 'px';
});

У дії:

Поточна прокрутка = <b id="showScroll">прокрутіть вікно браузера</b>

Подія scroll працює як на window, так і на елементах, які можна прокручувати.

Запобігання прокручування

Як ми можемо зробити щось непрокручуваним?

Ми не можемо запобігти прокручуванню за допомогою event.preventDefault() у прослуховувачі onscroll, оскільки він запускається після прокручування.

Але ми можемо запобігти прокручуванню за допомогою event.preventDefault() для події, яка його викликає, наприклад, події keydown для key:pageUp та key:pageDown.

Якщо ми додамо обробник до цих подій з event.preventDefault(), то прокручування не почнеться.

Існує багато способів ініціювати прокручування, тому надійніше використовувати CSS, а саме властивість overflow.

Ось кілька завдань, які ви можете вирішити або переглянути, щоб побачити застосування onscroll.