Прокрутка документа: событие scroll

Прокрутка документа: событие scroll

Здравствуйте! Продолжаем разбираться с событиями в JavaScript и на очереди у нас событие scroll, которое происходит при прокрутке окна броузера.

Это событие  могут генерировать только прокручиваемые элементы или само окно window. Но зато оно генерируется всегда, при любой прокрутке, не обязательно  если вы прокручиваете документ колесиком мыши.

Событие scroll

Вот пример функция при прокрутке окна выдает количество прокрученных пикселей:

window.onscroll = function() {
  let scroll = window.pageYOffset || document.documentElement.scrollTop;
  document.getElementById('showScroll').innerHTML = scroll + 'px';
}

 

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

Перечислим некоторые области применения scroll:

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

Пример. Кнопка Вверх, которая появляется если пользователь прокрутит  документ на один экран.

<a class="back_to_top" title="Наверх">↑</a>
<style>
.back_to_top {
  position: fixed;
  bottom: 80px;
  right: 40px;
  z-index: 9999;
  width: 40px;
  height: 40px;
  text-align: center;
  line-height: 30px;
  background: #f5f5f5;
  color: #444;
  cursor: pointer;
  border-radius: 2px;
  display: none;
}

.back_to_top:hover {
  background: #e9ebec;
}

.back_to_top-show {
  display: block;
}
</style>
<script>
let goTop = document.querySelector('.back_to_top');
window.addEventListener('scroll', trackScroll);
goTop.addEventListener('click', backToTop);
function trackScroll() {
    let scroll = window.pageYOffset;
    let coord = document.documentElement.clientHeight;

    if (scroll > coord) {
      goTop.classList.add('back_to_top-show');
    }
    if (scroll < coord) { goTop.classList.remove('back_to_top-show'); } } function backToTop() { if (window.pageYOffset > 0) {
      window.scrollBy(0, -80);
      setTimeout(backToTop, 0);
    }
  }
</script>

Задания

Кнопка вверх-вниз

Создайте кнопку навигации, которая помогает при прокрутке страницы.

Работать должна следующим образом:

  • Пока страница промотана меньше чем на высоту экрана вниз – кнопка не видна.
  • При прокрутке страницы вниз больше, чем на высоту одного экрана, появляется кнопка «стрелка вверх».
  • При нажатии на нее страница прыгает вверх, но не только. Дополнительно, кнопка меняется на «стрелка вниз» и при клике возвратит на старое место. Если же в этом состоянии посетитель сам прокрутит вниз больше, чем один экран, то она вновь изменится на «стрелка вверх».
Читайте также  Введение в события JavaScript

Загрузка видимых изображений

Реализуйте подгрузку изображений при прокрутке страницы. То есть, когда пользователь прокрутит страницу до конца ему будет показана еще одна порция картинок. Ну и так далее.

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

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

Об авторе

admin administrator

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: