scroll — JavaScript — Дока

  1. Кратко
  2. Как пишется
  3. Как понять
  4. На практике
    1. Николай Лопин советует

Кратко

Скопировано

scroll — это событие, когда пользователь прокручивает страницу или элемент в любой плоскости. Способами прокрутки могут быть: колесо мыши, кнопки клавиатуры, полосы прокрутки на экране.

👾

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

Как пишется

Скопировано

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

Как понять

Скопировано

Событие scroll возникает только при прокрутке. Попробуйте листать текст в демо ниже:

Открыть демо в новой вкладке

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

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

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

На практике

Скопировано

Николай Лопин советует

Скопировано

🛠 Если вы подписались на 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))

Если вы нашли ошибку, отправьте нам пул-реквест!

Во время отправки формы что-то пошло не так. Попробуйте ещё раз?

←

.preventDefault()

ctrl + alt + ←

→

wheel

ctrl + alt + →

CSS Scroll Snap — мощное средство для создания прокручиваемых контейнеров без JavaScript

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

Эта задача решается с помощью CSS-свойства overflow. Можно использовать значение auto или scroll. Пример кода:

See the Pen
Basic Slider by Pochemuta (@pochemuta)
on CodePen.

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

Решить эту проблему поможет CSS Scroll Snap. Он позволяет привязать положение прокрутки к местоположению или определённым элементам после того, как пользователь прокрутил страницу. Вот классный пример использования из статьи Practical CSS Scroll Snapping:

Простой прокручиваемый контейнер

Чтобы добиться похожего эффекта, добавим в наш код два свойства: scroll-snap-type и scroll-snap-align. Первое нужно указать для контейнера, второе — для дочерних элементов.

See the Pen
Scroll Snap by Pochemuta (@pochemuta)
on CodePen.


Отлично — теперь элементы можно пролистывать свайпом, а не перетаскивать пальцем через всю ширину экрана. Посмотрим, какие ещё возможности даёт CSS Scroll Snap.

1

Настройка направления и строгости привязки

Свойство scroll-snap-type задаётся контейнеру и позволяет указать направление, в котором происходит привязка прокрутки (x или y), а также строгость привязки (none, mandatory или proximity).

С направлением всё просто:

  • горизонтальная прокрутка — x или ключевое слово inline:
  • вертикальная прокрутка — y или ключевое слово block;
  • привязка в обоих направлениях — both.

Чуть сложнее увидеть разницу между значениями mandatory и proximity, которые определяют строгость привязки:

  • none — нет привязки к точке;
  • mandatory — обязательное смещение прокрутки к указанной точке;
  • proximity — смещение происходит только в тех ситуациях, когда область видимости находится близко к точке привязки. Степень близости браузер определяет самостоятельно.

Главный плюс mandatory — предсказуемость. Вы знаете, что браузер точно сместит область видимости к заданной точке. Главный минус — негибкость. Например, если содержимое при вертикальной прокрутке слишком большое по высоте, то пользователи окажутся в неприятной ситуации — они просто не смогут переместиться к определённому месту, браузер будет сразу перекидывать их к точке привязки.

See the Pen
Scroll Snap mandatory by Pochemuta (@pochemuta)
on CodePen.


Текст не помещается в области видимости по высоте, последние строчки невозможно прочитать, потому что срабатывает строгая привязка к прокрутке. Чтобы такого эффекта не было, можно заменить mandatory на proximity. Но и здесь остаётся опасность пролистывания — всё зависит от браузера.

Проблему можно решить с помощью свойства scroll-padding, о котором мы поговорим ниже.

2

Изменение точек привязки

Свойство scroll-snap-align задаётся дочерним элементам. Это те самые точки привязки, про которые шла речь при изучении значений mandatory и proximity свойства scroll-snap-type. Доступные значения scroll-snap-align — start, center и end.

Чтобы было проще понять разницу, посмотрите на этот пример:

See the Pen
Scroll Snap start, center, end by Pochemuta (@pochemuta)
on CodePen.


У первого и второго элементов значение start, у третьего — center, — у четвёртого и пятого — end. Прокрутите содержимое контейнера вверх и вниз. Проследите, как меняется позиция каждого элемента.

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

3

Управление прокруткой

Свойство scroll-snap-stop задаётся дочерним элементам и позволяет управлять прокруткой. Принимает два значения:

  • normal — привязка происходит только тогда, когда пользователь прекращает прокрутку, отдельные точки привязки могут быть пропущены;
  • always — контейнер останавливается на каждой точке привязке, прежде чем пользователь сможет скроллить дальше.

Значение по умолчанию — normal. Но если вы хотите исключить вероятность того, что пользователь пролистнёт важный элемент, установите значение always.

4

Настройка внутреннего отступа контейнера

Свойство scroll-padding задаётся контейнеру и устанавливает внутренний отступ. Вместо сокращённой записи можно использовать более конкретную: scroll-padding-top/right/bottom/left.

Внутренний отступ может быть полезен, если высота элемента больше высоты контейнера. Это решает рассмотренную выше проблему использования значения mandatory свойства scroll-snap-type. Можно просто указать, чтобы при пролистывании сверху оставалось достаточно место для отображения последних строк фрагмента текста.

See the Pen
Scroll Snap padding by Pochemuta (@pochemuta)
on CodePen.

Ещё одно полезное применение — если внутри контейнера есть фиксированный блок. Отступ поможет избавиться от перекрывания содержимого.

5

Настройка внешнего отступа элемента

Свойство scroll-margin задаётся дочерним элементам и устанавливает внешний отступ до позиции прокрутки. Вместо сокращённой записи можно использовать более конкретную: scroll-margin-top/right/bottom/left.

See the Pen
Scroll Snap margin by Pochemuta (@pochemuta)
on CodePen.

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

Поддержка в браузерах:

В последних версиях популярных браузеров полная поддержка. В Internet Explorer 10 и 11 — частичная.

Актуальность проверяйте на сайте Can I Use.

Узнать больше:

  • Спецификация CSS Scroll Snap

Ещё интересные материалы про CSS и фронтенд:

  • Современный CSS мощнее, чем вам кажется: 12 примеров, в которых не нужен JavaScript
  • Как работает CSS Flexbox: наглядное введение в систему компоновки элементов на веб-странице
  • Как стать фронтенд-разработчиком в 2021 году: дорожная карта

Реклама на Tproger: найдем для вас разработчиков нужного стека и уровня.

Подробнее

Реклама на tproger.ru

Загрузка

Читают сейчас

Свиток | Elasticsearch JavaScript Client [8.

6]

Хотя поисковый запрос возвращает одну «страницу» результатов, API прокрутки может быть используется для получения большого количества результатов (или даже всех результатов) из одного поисковый запрос, почти так же, как вы использовали бы курсор в традиционном база данных.

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

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

Чтобы использовать прокрутку, первоначальный поисковый запрос должен указывать прокрутку параметр в строке запроса, который сообщает Elasticsearch, как долго он должен хранить «контекст поиска» жив.

Знаете ли вы, что мы предоставляем помощник для отправки запросов на прокрутку? Вы можете найти это здесь.

 'использовать строго'
const {Клиент} = require('@elastic/elasticsearch')
постоянный клиент = новый клиент ({
  облако: {id: ''},
  аутентификация: {apiKey: 'base64EncodedKey'}
})
запуск асинхронной функции () {
  const allQuotes = []
  константа responseQueue = []
  // Давайте проиндексируем некоторые данные!
  const bulkResponse = ожидание client.bulk({
    // здесь мы форсируем обновление индекса,
    // иначе мы не получим никакого результата
    // в последующем поиске
    обновить: правда,
    операции: [
      // операция для выполнения
      { index: { _index: 'игра престолов' } },
      // документ для индексации
      {
        персонаж: «Нед Старк»,
        цитата: «Зима близко».
      },
      { index: { _index: 'игра престолов' } },
      {
        персонаж: «Дейенерис Таргариен»,
        цитата: «Я кровь дракона».
      },
      { index: { _index: 'игра престолов' } },
      {
        персонаж: «Тирион Ланнистер»,
        Цитата: «Уму нужны книги, как мечу точильный камень». 
      }
    ]
  })
  если (массовый ответ.ошибки) {
    console.log(массовый ответ)
    процесс.выход(1)
  }
  // начнем с поиска, установки тайм-аута прокрутки и нажатия
  // наш первый ответ в очереди на обработку
  константный ответ = ожидание client.search({
    индекс: «Игра престолов»,
    // сохранить результаты поиска "прокручиваемыми" в течение 30 секунд
    прокрутка: «30-е годы»,
    // для этого примера мы получим только один результат на поиск
    размер: 1,
    // фильтруем источник, чтобы включить только поле цитаты
    _источник: ['цитата'],
    запрос: {
      match_all: {}
    }
  })
  responseQueue.push(ответ)
  в то время как (responseQueue.length) {
    константное тело = responseQueue.shift()
    // собираем заголовки из этого ответа
    body.hits.hits.forEach (функция (попадание) {
      allQuotes.push(hit._source.quote)
    })
    // проверяем, все ли котировки мы собрали
    если (body.hits.total.value === allQuotes.length) {
      console.log('Каждая цитата', allQuotes)
      перерыв
    }
    // получаем следующий ответ, если есть еще котировки для выборки
    ответQueue. push(
      ожидайте client.scroll({
        scrollId: body._scroll_id,
        прокрутка: «30-е годы»
      })
    )
  }
}
run().catch(console.log)

Еще одно интересное использование API-интерфейса scroll можно сделать с помощью Node.js ≥ 10, используя асинхронная итерация!

 'использовать строго'
const {Клиент} = require('@elastic/elasticsearch')
постоянный клиент = новый клиент ({
  облако: {id: ''},
  аутентификация: {apiKey: 'base64EncodedKey'}
})
// Утилита прокрутки
асинхронная функция * scrollSearch (параметры) {
  пусть ответ = ожидание client.search (параметры)
  пока (правда) {
    const sourceHits = response.hits.hits
    если (sourceHits.length === 0) {
      перерыв
    }
    for (константное попадание sourceHits) {
      хит урожая
    }
    если (!ответ._scroll_id) {
      перерыв
    }
    ответ = ожидание client.scroll({
      scrollId: ответ._scroll_id,
      прокрутка: params.scroll
    })
  }
}
запуск асинхронной функции () {
  ждать client. bulk({
    обновить: правда,
    операции: [
      { index: { _index: 'игра престолов' } },
      {
        персонаж: «Нед Старк»,
        цитата: «Зима близко».
      },
      { index: { _index: 'игра престолов' } },
      {
        персонаж: «Дейенерис Таргариен»,
        цитата: «Я кровь дракона».
      },
      { index: { _index: 'игра престолов' } },
      {
        персонаж: «Тирион Ланнистер»,
        Цитата: «Уму нужны книги, как мечу точильный камень».
      }
    ]
  })
  константные параметры = {
    индекс: «Игра престолов»,
    прокрутка: «30-е годы»,
    размер: 1,
    _источник: ['цитата'],
    запрос: {
      match_all: {}
    }
  }
  for await (постоянное попадание в scrollSearch(params)) {
    console.log(hit._source)
  }
}
run().catch(console.log)

Javascript: изменение цвета фона при прокрутке

Слинг С Академия А

    Главная » JavaScript » Javascript: изменение цвета фона при прокрутке

    Обновлено: 8 марта 2023 г. Автор: Гудман Опубликовать комментарий

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

    Реклама

    1 Предварительный просмотр примера

    2 Код

    3 Объяснение

    Предварительный просмотр примера

    Вот демонстрация:

    Код

    Полный код:

      <голова> <мета-кодировка="UTF-8">Академия слинга <стиль> * {
 box-sizing: рамка-бокс
 }
 тело {
 высота: 1000вх;
 переход: фон 1с легкость;
 }
 .содержание {
 отступ: 50 пикселей;
 белый цвет;
 выравнивание текста: по центру;
 }   <тело> <дел>
    Добро пожаловать в Sling Academy
    <скрипт> var body = document. getElementsByTagName('body')[0]; body.style.backgroundColor = 'зеленый'; // запускаем эту функцию каждый раз, когда пользователь прокручивает window.onscroll = функция (событие) { var scroll = window.pageYOffset; если (прокрутить < 300) { // зеленый body.style.backgroundColor = 'зеленый'; } иначе если (прокрутка >= 300 && прокрутка < 600) { // желтый body.style.backgroundColor = 'желтый'; } иначе если (прокрутка >= 600 && прокрутка < 1200) { // синий body.style.backgroundColor = 'синий'; } иначе если (прокрутка >= 1200 && прокрутка < 1800) { // апельсин body.style.backgroundColor = 'оранжевый'; } иначе если (прокрутка >= 1800 && прокрутка < 3000) { // красный body.style.backgroundColor = 'красный'; } еще { // фиолетовый body.

    No related posts.