Javascript on window scroll event

Element: scroll event

The scroll event fires when an element has been scrolled. To detect when scrolling has completed, see the Element: scrollend event .

Syntax

Use the event name in methods like addEventListener() , or set an event handler property.

addEventListener("scroll", (event) => >); onscroll = (event) => >; 

Event type

Examples

The following examples show how to use the scroll event with an event listener and with the onscroll event handler property. The setTimeout() method is used to throttle the event handler because scroll events can fire at a high rate. For additional examples that use requestAnimationFrame() , see the Document: scroll event page.

Using scroll with an event listener

The following example shows how to use the scroll event to detect when the user is scrolling inside an element:

div id="scroll-box" style="overflow: scroll; height: 100px; width: 100px; float: left;"> p style="height: 200px; width: 200px;">Scroll me!p> div> p style="text-align: center;" id="output">Waiting on scroll events. p> 

const element = document.querySelector("div#scroll-box"); const output = document.querySelector("p#output"); element.addEventListener("scroll", (event) =>  output.innerHTML = "Scroll event fired!"; setTimeout(() =>  output.innerHTML = "Waiting on scroll events. "; >, 1000); >); 

Using onscroll event handler property

The following example shows how to use the onscroll event handler property to detect when the user is scrolling:

div id="scroll-box" style="overflow: scroll; height: 100px; width: 100px; float: left;"> p style="height: 200px; width: 200px;">Scroll me!p> div> p id="output" style="text-align: center;">Waiting on scroll events. p> 

const element = document.querySelector("div#scroll-box"); const output = document.querySelector("p#output"); element.onscroll = (event) =>  output.innerHTML = "Element scroll event fired!"; setTimeout(() =>  output.innerHTML = "Waiting on scroll events. "; >, 1000); >; 

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Apr 7, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

Прокрутка

Событие прокрутки 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 ).

Источник

Scrolling

The scroll event allows reacting to a page or element scrolling. There are quite a few good things we can do here.

• Show/hide additional controls or information depending on where in the document the user is.
• Load more data when the user scrolls down till the end of the page.

Here’s a small function to show the current scroll:

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

Current scroll = scroll the window

The scroll event works both on the window and on scrollable elements.

Prevent scrolling

How do we make something unscrollable?

We can’t prevent scrolling by using event.preventDefault() in onscroll listener, because it triggers after the scroll has already happened.

But we can prevent scrolling by event.preventDefault() on an event that causes the scroll, for instance keydown event for pageUp and pageDown .

If we add an event handler to these events and event.preventDefault() in it, then the scroll won’t start.

There are many ways to initiate a scroll, so it’s more reliable to use CSS, overflow property.

Here are few tasks that you can solve or look through to see applications of onscroll .

Tasks

Endless page

Create an endless page. When a visitor scrolls it to the end, it auto-appends current date-time to the text (so that a visitor can scroll more).

Please note two important features of the scroll:

1. The scroll is “elastic”. We can scroll a little beyond the document start or end in some browsers/devices (empty space below is shown, and then the document will automatically “bounces back” to normal).
2. The scroll is imprecise. When we scroll to page end, then we may be in fact like 0-50px away from the real document bottom.

So, “scrolling to the end” should mean that the visitor is no more than 100px away from the document end.

P.S. In real life we may want to show “more messages” or “more goods”.

The core of the solution is a function that adds more dates to the page (or loads more stuff in real-life) while we’re at the page end.

We can call it immediately and add as a window.onscroll handler.

The most important question is: “How do we detect that the page is scrolled to bottom?”

Let’s use window-relative coordinates.

The document is represented (and contained) within tag, that is document.documentElement .

We can get window-relative coordinates of the whole document as document.documentElement.getBoundingClientRect() , the bottom property will be window-relative coordinate of the document bottom.

For instance, if the height of the whole HTML document is 2000px , then:

// when we're on the top of the page // window-relative top = 0 document.documentElement.getBoundingClientRect().top = 0 // window-relative bottom = 2000 // the document is long, so that is probably far beyond the window bottom document.documentElement.getBoundingClientRect().bottom = 2000

If we scroll 500px below, then:

// document top is above the window 500px document.documentElement.getBoundingClientRect().top = -500 // document bottom is 500px closer document.documentElement.getBoundingClientRect().bottom = 1500

When we scroll till the end, assuming that the window height is 600px :

// document top is above the window 1400px document.documentElement.getBoundingClientRect().top = -1400 // document bottom is below the window 600px document.documentElement.getBoundingClientRect().bottom = 600

Please note that the bottom can’t be 0 , because it never reaches the window top. The lowest limit of the bottom coordinate is the window height (we assumed it to be 600 ), we can’t scroll it any more up.

We can obtain the window height as document.documentElement.clientHeight .

For our task, we need to know when the document bottom is not no more than 100px away from it (that is: 600-700px , if the height is 600 ).

function populate() < while(true) < // document bottom let windowRelativeBottom = document.documentElement.getBoundingClientRect().bottom; // if the user hasn't scrolled far enough (>100px to the end) if (windowRelativeBottom > document.documentElement.clientHeight + 100) break; // let's add more data document.body.insertAdjacentHTML("beforeend", `
Date: $ `); > >

Источник