Javascript прокрутка страницы: Перемещение окна и прокрутка страницы в JavaScript

scroll и wheel — JavaScript — Дока

Кратко

scroll — это событие на HTML-элементе. Событие происходит, когда страница или элемент не входит на экран и пользователь её прокручивает. Способ прокрутки может быть любым — колесом мыши, кнопками клавиатуры, с помощью полосы прокрутки на экране.

Событие wheel происходит, когда пользователь прокручивает колесо мыши. При этом реального прокручивания может не происходить. Например, наша страница полностью помещается на экран, но пользователь пытается её прокрутить. В этом случае событие wheel будет происходить, а событие scroll — нет.

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

Как пишется

Стандартно с помощью addEventListener():

document. addEventListener('scroll', function(event) {  console.log(event)})
          document.addEventListener('scroll', function(event) {
  console.log(event)
})

Отловим все случаи, когда пользователь крутит колесо мыши при наведённом на первый <div> курсоре:

const div = document.getElementsByTagName('div')[0]div.addEventListener('wheel', function(event) {  console.log(event)})
          const div = document.getElementsByTagName('div')[0]
div.addEventListener('wheel', function(event) {
  console.log(event)
})

Как понять

Разницу между событиями можно понять на демо ниже. wheel происходит всегда когда пользователь крутит колесо мыши (или что-то его заменяющее), а scroll только при прокрутке:

Объект события

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

Чтобы понять, насколько прокрутилась страница или элемент, этот элемент получают из DOM-дерева или ключевого слова this и запрашивают свойства scrollTop или scrollLeft.

document.addEventListener('scroll', function() {  // получаем высоту элемента, на котором произошло событие  console.log(this.scrollTop)})
          document.addEventListener('scroll', function() {
  // получаем высоту элемента, на котором произошло событие
  console.log(this.scrollTop)
})

Объект события

Так как прокрутки при wheel не происходит, объект события содержит информацию о направлении и «силе» прокрутки в свойствах:

• deltaX — горизонтальная прокрутка. Значение — целое число:
  • отрицательное, если пользователь прокручивает влево;
  • 0 — если в этом направлении прокрутка не происходит
  • положительное при прокрутке вправо;
• deltaY — вертикальная прокрутка. Значение — целое число:
  • отрицательное, если пользователь прокручивает вверх;
  • 0 — если в этом направлении прокрутка не происходит
  • положительное при прокрутке вниз;

Если элемент имеет полосу прокрутки, то обычно после события wheel происходит scroll (смотри пример выше). Этого можно избежать, вызвав метод события preventDefault().

document.addEventListener('wheel', function(event) {  // останавливаем поведение по умолчанию, то есть прокрутку  event.preventDefault()})
          document.addEventListener('wheel', function(event) {
  // останавливаем поведение по умолчанию, то есть прокрутку
  event.preventDefault()
})

С помощью объекта события можно, например, перемещать элемент по экрану при прокрутке колеса мыши на десктопе. Чтобы посмотреть, как это работает, откройте демо в новой вкладке по ссылке внизу.

На практике

Николай Лопин

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

🛠 Избежать большого количества событий scroll можно, используя технику под названием throttling. Её смысл состоит в том, чтобы принимать следующее событие только после истечения некоторого промежутка времени.

const throttle = (func, limit) => {  let lastFunc  let lastRan  return function() {    const context = this    const args = arguments    if (!lastRan) {      func.apply(context, args)      lastRan = Date.now()    } else {      clearTimeout(lastFunc)      lastFunc = setTimeout(function() {        if ((Date.now() - lastRan) >= limit) {          func.apply(context, args)          lastRan = Date.now()        }      }, limit - (Date.now() - lastRan))    }  }}// код будет срабатывать раз в 1 секундуdocument.addEventListener('scroll', throttle(function() {  return console.  log('Hey! It is', new Date().toUTCString())}, 1000))
          const throttle = (func, limit) => {
  let lastFunc
  let lastRan
  return function() {
    const context = this
    const args = arguments
    if (!lastRan) {
      func.apply(context, args)
      lastRan = Date.now()
    } else {
      clearTimeout(lastFunc)
      lastFunc = setTimeout(function() {
        if ((Date.now() - lastRan) >= limit) {
          func.apply(context, args)
          lastRan = Date.now()
        }
      }, limit - (Date.now() - lastRan))
    }
  }
}
// код будет срабатывать раз в 1 секунду
document.addEventListener('scroll', throttle(function() {
  return console.log('Hey! It is', new Date().toUTCString())
}, 1000))
 

Уменьшающаяся при прокрутке “шапка” страницы без JavaScript

Представьте себе красивую и массивную “шапку” (header) веб-страницы с множеством отступов сверху и снизу от содержимого. Когда страница прокручивается (скроллится) вниз, “шапка” сжимается, уменьшая отступы и содержимое, чтобы оставить больше места на экране для остального контента.

Обычно, чтобы добавить такой эффект уменьшения шапки при скролле страницы, используется немного JavaScript и CSS, но с появлением position: sticky то же самое можно сделать, используя только CSS.

Начинаем, как обычно, с HTML-разметки. Здесь нет ничего сложного:

<header>
  <div>
    <div>...</div>
    <nav>...</nav>
  </div>
</header>

Затем в CSS, объявим высоту для <header> (120 пикселей) и настроим его как flex-контейнер, который выравнивает содержимое по центру. Затем сделаем его “липким” (sticky).

.header-outer {
  display: flex;
  align-items: center;
  position: sticky;
  height: 120px;
}

Все остальные элементы “шапки”: логотип и навигация – размещаются во внутреннем контейнере. В некотором смысле этот контейнер и является “шапкой”, тогда как единственная функция родительского HTML-элемента

Настроим внутренний контейнер, указываем для .header-inner высоту 70 пикселей и тоже делаем его “липким” (sticky).

.header-inner {
  height: 70px;
  position: sticky;
  top: 0; 
}

Для чего top: 0;? Это нужно для того, чтобы контейнер, когда он становится “липким” (sticky), крепился к самому верху окна.

А теперь хитрость! Чтобы внутренний контейнер прилипал к верхнему краю страницы, нужно указать родительскому элементу

.header-outer {
  display: flex;
  align-items: center;
  position: sticky;
  height: 120px;
  /* top равно разнице высот
  между внешним и внутренним
  контейнерами */
  top: -50px;
}

Собираем теперь это всё воедино. <header> выдвигается за пределы экрана, а внутренний контейнер аккуратно помещается в верхней части области просмотра.

See this code Shrinking header on scroll without Javascript on x.xhtml.ru.

Таким образом можно приклеить к верхней части окна любой элемент. Например, важное объявление.

See this code Sticky banner on x.xhtml.ru.

При всём великолепии этого метода приклеивания элементов к верху окна при скролле с помощью только CSS, у него есть ограничения. Например, для внутреннего и внешнего контейнера нужно указать фиксированную высоту. При этом, они становятся уязвимыми для изменений, например, когда элементы навигации переносятся, потому что количество пунктов меню превышает количество отведенного для них места.

Еще одно ограничение? Не уменьшается логотип. Это, пожалуй, самый большой недостаток, поскольку логотипы часто являются самым большим потребителем свободного места. Наверное, когда-нибудь получится применять стили, основанные на липкости элемента…

How to Create a Shrinking Header on Scroll Without JavaScript.

position: sticky

10 лучших плагинов прокрутки одной страницы для мобильных устройств (обновление 2023 г.)

Что такое прокрутка одной страницы?

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

С помощью One Page Scroll ваши посетители могут плавно прокручивать разделы страницы (с полной шириной и высотой), как на мобильных устройствах.

Лучший плагин прокрутки одной страницы

В этом посте мы перечисляем 10 лучших плагинов jQuery и Vanilla JavaScript для прокрутки одной страницы с сенсорным экраном , которые отлично работают как на ПК, так и на мобильных устройствах. Наслаждаться.

Первоначально опубликовано 14 февраля 2019 г., обновлено 10 февраля 2023 г.

Лучшие плагины jQuery для прокрутки одной страницы

Apple iPhone Website Like Плагин прокрутки одной страницы для jQuery

Модный и быстрый плагин jQuery для создания отзывчивых полноэкранных эффектов прокрутки одной страницы с точечной навигацией, аналогичный Apple iPhone 5S / 5C Веб-сайт.

[Демо] [Скачать]

Создание полноэкранных веб-сайтов с прокруткой одной страницы с помощью fullPage.js

fullPage.js — еще один плагин jQuery для одностраничного веб-сайта, который позволяет создавать веб-страницы с вертикальной или горизонтальной прокруткой с плавной анимация и варианты смягчения.

[Демо] [Скачать]

Нативное приложение, подобное полноэкранной прокрутке страниц — jQuery FullView.Js

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

[Демонстрация] [Скачать]

Плагин jQuery для создания отзывчивого веб-макета с прокруткой одной страницы — vPageScroll.js

Простой, но надежный плагин jQuery для создания адаптивного макета сетки для веб-сайта с прокруткой одной страницы. Плагин поставляется с полностью отзывчивой боковой или верхней панелью навигации, которая позволяет посетителю плавно прокручивать различные разделы вашей веб-страницы. vPageScroll.js предоставляется на условиях Стандартной общественной лицензии GNU.

[Демо] [Скачать]

Плагин Smooth Fullscreen Page Slider с jQuery — Scroll Page

Небольшой плагин jQuery, который позволяет вам прокручивать панели содержимого вашей веб-страницы с помощью колесика мыши или элементов управления Next/Prev. Идеально подходит для адаптивного полноэкранного веб-сайта с прокруткой одной страницы.

[Демо] [Скачать]

Лучшие плагины прокрутки одной страницы для ванильного JavaScript0031

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

[Демонстрация] [Скачать]

Базовая прокрутка одной страницы в ванильном JavaScript — LeScroll

LeScroll. js Помогает создать отзывчивый веб-сайт с прокруткой одной страницы с переходами CSS, написанный на ванильном JavaScript.

[Демо] [Скачать]

onepagescroll.js

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

Загрузить демоверсию

Легкая полноэкранная прокрутка на чистом JavaScript — fullPage.js

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

[Демо] [Скачать]

Гладкое полноэкранное слайд-шоу страниц с ванильным JavaScript – FullScroll

Библиотека ванильного JavaScript, используемая для создания полноэкранных вертикальных слайд-шоу страниц/слайдеров с плавной прокруткой и навигацией с помощью клавиатуры. Отлично подходит для создания презентации на всю страницу, чтобы продемонстрировать свои работы.

[Демо] [Скачать]

Дополнительные ресурсы:

Ищете дополнительные плагины jQuery или библиотеки JavaScript для создания потрясающих эффектов прокрутки одной страницы в Интернете и на мобильных устройствах? Дополнительные сведения см. в разделах jQuery One Page Scroll и JavaScript One Page Scroll.

См. также:

• Лучшие библиотеки JavaScript для прокрутки одной страницы
• Лучшие плагины с эффектом прокрутки параллакса
• Лучшие плагины Smooth Scroll
• Лучшие плагины Scrollspy для JavaScript
• Лучшие плагины бесконечной прокрутки в JavaScript
• Лучшие плагины анимации, активируемые прокруткой, с JavaScript

Сохранение позиции прокрутки при загрузке страницы без SPA — начало блога

Райан Бетел
@ryanbethel@indieweb. social
на 12 января 2023

Фото Тейлор Флоу на Unsplash

Получите желаемые функции SPA с помощью MPA, отображаемого на сервере

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

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

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

Рассказчик: «Это было не круто» .

Проблема в том, что нам пришлось выбросить много хороших вещей и начать с нуля. Избавьтесь от s и URL-адресов в пользу клиентских маршрутизаторов и URL-адресов, которые не отражают фактическое состояние. Откажитесь от проверенных HTML

 <тип сценария = "модуль">
      макет класса расширяет HTMLElement {
        конструктор () {
          супер()
          пусть боковая панель = this.querySelector('#sidebar')
          let top = sessionStorage.getItem('docs-sidebar-scroll')
          если (сверху !== ноль) {
            sidebar.scrollTop = parseInt (сверху, 10)
          }
          window.addEventListener('перед выгрузкой', () => {
            sessionStorage.setItem('docs-sidebar-scroll', sidebar.scrollTop)
          })
        }
      }
      customElements.define('docs-layout', Макет)