Главная » Языки программирования

Document

Содержание
  1. Обработка события прокрутки в JavaScript
  2. Понятие события прокрутки
  3. Как услышать события прокрутки
  4. СПОСОБ 1: ИСПОЛЬЗОВАНИЕ СВОЙСТВА ONSCROLL
  5. СПОСОБ 2: ИСПОЛЬЗОВАНИЕ addEventListener
  6. Прокрутка
  7. Предотвращение прокрутки
  8. Задачи
  9. Бесконечная страница

Обработка события прокрутки в JavaScript

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

Давайте возьмем pinterest.com в качестве примера; вы заметите, что по мере того, как пользователь прокручивает нижнюю часть страницы, продолжает загружаться все больше изображений.

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

В этой статье мы узнаем о событиях прокрутки JavaScript.

Понятие события прокрутки

Событие прокрутки в JavaScript приводит к изменению положения полосы прокрутки по вертикали или горизонтали. Для его прослушивания можно использовать прослушиватель событий JavaScript или обработчик событий JavaScript.

Для чтения событий прокрутки (рабочий стол) или касания (мобильный) обработчик событий прокрутки представляет собой пакет NPM, и каждому событию присваивается обратный вызов.

Поскольку «прокрутка» — это событие JavaScript, мы можем добавить прослушиватель событий к любому элементу объектной модели документа для получения событий прокрутки.

События, которые происходят в результате событий прокрутки.

  1. События прокрутки приводят к началу воспроизведения анимации: некоторые веб-сайты с анимацией становятся красивее по мере прокрутки страницы вниз. Анимация воспроизводится более плавно, когда вы используете полосу прокрутки для продвижения вперед, такие как: webflow.com
  2. Переключение класса: если вы немного прокрутите окно просмотра на многочисленных веб-сайтах, таких как pitchefork.com, вы часто будете замечать это. Если вы посмотрите на панель навигации, вы увидите, что скрытая навигация изначально становится видимой.
Читайте также:  Message handler python aiogram

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

Как услышать события прокрутки

Есть два способа, которыми мы можем его прослушать. Чтобы прослушать событие прокрутки, вам сначала нужно прокрутить вверх и вниз ваш браузер.

like in the image above, you won’t find a scroll bar. but to get one. make a 
tag or a paragraph tag, and put some dormie text inside.        
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur amet quod explicabo nihil numquam sunt officiis corrupti? Temporibus vero corporis omnis dolorem aspernatur, nihil eos eaque maxime deleniti molestiae vitae aperiam ut laboriosam dolore quo est architecto nemo nulla dolorum exercitationem neque quos! Corrupti ad dignissimos tenetur aspernatur provident! Quidem consectetur sapiente laudantium dignissimos similique in, quibusdam quod vitae dolorem explicabo necessitatibus eveniet nemo vel dolore accusamus ducimus nulla fugiat maiores id! Nesciunt quaerat harum, labore, amet maxime, ratione ab nobis illum atque deleniti nemo expedita earum possimus culpa exercitationem porro architecto iste. Velit placeat tempore, odio eveniet earum iusto consequuntur quidem vel quis repellat perferendis commodi ea mollitia laborum tempora inventore at. Pariatur ipsum reprehenderit earum nobis! Recusandae, accusantium tempore quatibus maiores ducimus adipisci dolorem voluptas sint voluptatum voluptates libero, quod magnam explicabo rerum? Autem aliquid mollitia modi minima quasi, temporibus totam eum fugit eaque. Excepturi officiis ab deserunt est! Quaerat expedita harum iusto pariacepturi sapiente non dicta? Fuga totam quae similique sapiente voluptas accusantium maxime nam omnis fugit ratione, blaasi omnis. Alias fuga hic eveniet, qui corporis nostrum, dicta maiores vel voluptatum quibusdam facilis modi saepe quo facere dolore magni ipsa excepturi assumenda ex et qus impedit esse sequi numquam officia? Earum autem pariatur, eos nihil excepturi officiis nulla officia quam velit neque, iste omnis quidem laborum modi ad quod placeat fugiat? Assumenda aliquid, aspernatur ipsam rerum illum cumque esse, excepturi eveniet sunt velit ea eum. Dolor error, id animi nihil eos, nemo vo!

Если вы вернетесь в браузер, вы увидите все эти теги, которые теперь дадут нам полосу прокрутки.

Как вы можете видеть, теперь у нас есть полоса прокрутки, и мы можем прокручивать страницу вверх и вниз.

Вот первый способ, которым мы можем прослушивать события прокрутки.

СПОСОБ 1: ИСПОЛЬЗОВАНИЕ СВОЙСТВА ONSCROLL

Поскольку мы часто хотим отслеживать полную прокрутку веб-страницы вверх и вниз, очень часто прослушиваются события прокрутки объекта window.

Теперь мы используем объект Windows для достижения этой цели. У нас есть свойство с именем on-scroll в нашем script.js. Вы можете узнать, когда запускается событие прокрутки, назначив его функции, а затем зарегистрировав его в консоли.

Вы увидите, что число продолжает расти по мере того, как мы прокручиваем строку вниз.

Имейте в виду, что событие прокрутки быстро устанавливает время загрузки файла. Если вы хотите выполнить сложную обработку событий или функцию обратного вызова, событие прокрутки является одним из видов событий, которые могут быть сложными.

Снятие ограничений, регулирование и другие методы — вот некоторые из способов улучшения этих многих элементов.

СПОСОБ 2: ИСПОЛЬЗОВАНИЕ addEventListener

Теперь вместо windows, при прокрутке это будет windows.addeventlistener подобный этому

window.addEventListener ("scroll",() => < console.log("white creativity"); >)

Первый аргумент — это имя события, которое является scroll, вторым аргументом будет функция обратного вызова обработчика событий. Которая является функцией события, которая будет запущена при запуске этой функции события. Наконец-то console.log снова.

Происходит то же самое: число продолжает расти по мере прокрутки полосы.

Метод addEventListener рекомендуется для прослушивания событий, поскольку мы можем добавить несколько обработчиков событий к событиям прокрутки, используя функцию addEventListener.

В Windows objects мы до сих пор прослушивали события прокрутки. Теперь, когда это есть в элементах страницы, мы можем услышать наблюдение за событиями прокрутки элементов страницы.

Мы увидим, что мы являемся примером. Сформируйте div. Поместите в него тег абзаца. Создайте div и вставьте элемент абзаца с некоторым содержимым-заполнителем внутри div.

        
monkeys love bananaLorem ipsum dolor sit amet consectetur, adipisicing elit. Qui perferendis deleniti nisi, saepe debitis error laborum! Exercitationem porro tenetur architecto, officiis voluptates maxime. Dolorem commodi nobis sapiente deleniti quos eligendi. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus, accusantium. Dicta necessitatibus delectus fugiat minima molestias. Enim dolorum eum eos, aliquid eius nihil placeat cumque reprehenderit nesciunt perferendis tenetur possimus.

оформите это немного в вашем CSS, вот так

на script.js напишите этот код.

document.querySelector(".container") .addEventListener("scroll", (a) =>< console.log(a) >)

Для нацеливания на контейнер мы используем селектор запросов и div с классом контейнера.

Затем мы вызываем adEventListener и передаем событие прокрутки, а обработчик событий вызывает функцию обратного вызова.

Всякий раз, когда мы добавляем прослушиватель событий, у нас есть доступ к самому объекту события. Мы можем использовать все, что захотим, но мы просто хотим использовать маленькую букву « а ». Наконец, посмотрим на объект события console.log(а) .

scroll inside the container itself. Take a look at the console. you are going to see a whole lot of running object that was logged.

Если вы введете этот код в консоль своего браузера и прокрутите страницу, вы увидите, что получаете undefined. Интригующий момент заключается в том, что нам не понадобятся scrollTop или scrollLeft при работе с объектом Windows. Вместо этого мы будем использовать прокрутку (scrollY) и прокручивать (scrollX).

Вы увидите, что получаете числовые значения в консоли, если используете прокрутку и проверяете консоль браузера.

document.querySelector(".container") .addEventListener("scroll", (a) =>< console.log(a.target.scrollTop) >)

Если вы напишете этот код и вернетесь в консоль, вы заметите, что по мере прокрутки вниз количество пикселей увеличивается.

Теперь, если вы хотите увидеть, сколько мы прокрутили по горизонтали, вы увидите свойство прокрутки влево.

Мы хотим вернуться к нашему предыдущему примеру, когда мы смотрели на событие прокрутки объекта window.

window.addEventListener ("scroll",() => < console.log(window.scrollTop); >)

Если вы напишете этот код и прокрутите его в консоли вашего браузера, вы заметите, что получите undefined. Итак, интересно то, что когда мы имеем дело с объектом Windows, мы не будем использовать scrollTop или scrollLeft. Но скорее мы будем использовать scrollY и scrollX.

Если вы используете scrollY и посмотрите в консоли браузера, вы заметите, что вы будете получать числовые значения в консоли.

Источник

Прокрутка

Событие прокрутки scroll позволяет реагировать на прокрутку страницы или элемента. Есть много хороших вещей, которые при этом можно сделать.

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

Вот небольшая функция для отображения текущей прокрутки:

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

Текущая прокрутка = прокрутите окно

Событие scroll работает как на window , так и на других элементах, на которых включена прокрутка.

Предотвращение прокрутки

Как можно сделать что-то непрокручиваемым?

Нельзя предотвратить прокрутку, используя event.preventDefault() в обработчике onscroll , потому что он срабатывает после того, как прокрутка уже произошла.

Но можно предотвратить прокрутку, используя event.preventDefault() на событии, которое вызывает прокрутку, например, на событии keydown для клавиш pageUp и pageDown .

Если поставить на них обработчики, в которых вызвать event.preventDefault() , то прокрутка не начнётся.

Способов инициировать прокрутку много, поэтому более надёжный способ – использовать CSS, свойство overflow .

Вот несколько задач, которые вы можете решить или просмотреть, чтобы увидеть применение onscroll .

Задачи

Бесконечная страница

Создайте бесконечную страницу. Когда посетитель прокручивает её до конца, она автоматически добавляет текущие время и дату в текст (чтобы посетитель мог прокрутить ещё).

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

  1. Прокрутка «эластична». Можно прокрутить немного дальше начала или конца документа на некоторых браузерах/устройствах (после появляется пустое место, а затем документ автоматически «отскакивает» к нормальному состоянию).
  2. Прокрутка неточна. Если прокрутить страницу до конца, можно оказаться в 0-50px от реальной нижней границы документа.

Таким образом, «прокрутка до конца» должна означать, что посетитель находится на расстоянии не более 100px от конца документа.

P.S. В реальной жизни мы можем захотеть показать «больше сообщений» или «больше товаров».

Основа решения – функция, которая добавляет больше дат на страницу (или загружает больше материала в реальной жизни), пока мы находимся в конце этой страницы.

Мы можем вызвать её сразу же и добавить как обработчик для window.onscroll .

Самый важный вопрос: «Как обнаружить, что страница прокручена к самому низу?»

Давайте используем координаты относительно окна.

Документ представлен тегом (и содержится в нём же), который доступен как document.documentElement .

Так что мы можем получить его координаты относительно окна как document.documentElement.getBoundingClientRect() , свойство bottom будет координатой нижней границы документа относительно окна.

Например, если высота всего HTML-документа 2000px , тогда:

// когда мы находимся вверху страницы // координата top относительно окна равна 0 document.documentElement.getBoundingClientRect().top = 0 // координата bottom относительно окна равна 2000 // документ длинный, вероятно, далеко за пределами нижней части окна document.documentElement.getBoundingClientRect().bottom = 2000

Если прокрутить 500px вниз, тогда:

// верх документа находится выше окна на 500px document.documentElement.getBoundingClientRect().top = -500 // низ документа на 500px ближе document.documentElement.getBoundingClientRect().bottom = 1500

Когда мы прокручиваем до конца, предполагая, что высота окна 600px :

// верх документа находится выше окна на 1400px document.documentElement.getBoundingClientRect().top = -1400 // низ документа находится ниже окна на 600px document.documentElement.getBoundingClientRect().bottom = 600

Пожалуйста, обратите внимание, что bottom не может быть 0 , потому что низ документа никогда не достигнет верха окна. Нижним пределом координаты bottom является высота окна (выше мы предположили, что это 600 ), больше прокручивать вверх нельзя.

Получить высоту окна можно как document.documentElement.clientHeight .

Для нашей задачи мы хотим знать, когда нижняя граница документа находится не более чем в 100px от неё (т.е. 600-700px , если высота 600 ).

Источник

Оцените статью