Как вычислить кинетический скролл без моря таймаутов?

Question

[Алексей Рахе]

Есть параллакс, и если сам по себе touch-скролл более-менее обрабатывается набором touchend, touchstart, touchcancel, touchmove событий, то ситуация «коснулся пальцем, быстро дернул и тут же отпустил, а экран проскроллся по инерции» у меня не обрабатывается корректно.

Из топорных методов, конечно, приходит в голову интервал на touchstart, но мне кажется это уродливым решением

Может, я копаю куда-то не туда?

Answer 1

[xmoonlight]

Вот готовый пример. Должен помочь.

Comments

[Алексей Рахе]

боюсь, вы не так меня поняли. мне не надо «имитировать» кинетику, мне надо вычислить, когда срабатывает стандартная кинетика в мобильных устройствах, посчитать расстояние, на которое она прокручивает страничку, чтобы верно расставить параллакс элементы

[xmoonlight]

Алексей Рахе, теперь я не могу понять фразы:

мне надо вычислить, когда срабатывает стандартная кинетика

Если она сработала - зачем что-то вычислять? Отталкивайтесь от позиции прокрутки.

[Алексей Рахе]

да, но событие! КОГДА взять позицию прокрутки и пересчитать расположение параллакс слоёв? стандартный набор touchend, touchstart, touchcancel, touchmove завершается РАНЬШЕ, чем заканчивается плавная кинетическая прокрутка, т.е. по этим событиям я получаю положение ДО окончательной остановки прокрутки.

делать таймер мне кажется ОЧЕНЬ топорным решением, так как длительность кинетики зависит от силы «толчка».

[xmoonlight]

Алексей Рахе, https://learn.javascript.ru/onscroll

[Алексей Рахе]

естественно, сначала я делал параллакс для десктопов и использовал событие скролл. после этого при разработке мобильной версии я и наткнулся на проблему с тач эвентами. при тачах скролл НЕ СРАБАТЫВАЕТ.

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

https://minimus.site/bomanka/index.html

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

[xmoonlight]

Алексей Рахе, по линку - тач-скрол срабатывает? цифра переключается?

[Алексей Рахе]

xmoonlight, ВЕРТИКАЛЬНЫЙ — конечно, да. И у меня в примере срабатывает при вертикальной прокрутке и тач и скролл события. ГОРИЗОНТАЛЬНЫЙ же тач-скролл не генерирует событие скролл у меня. Посмотрите мою ссылку и консоль. Точка переключения 500 пикселей. на экранах менее 500 пикселей у меня работают и тач и скролл события, вертикальная прокрутка. выше 500 пикселей переключается в горизонтальный режим и при тач событиях не срабатывает скролл

[xmoonlight]

Алексей Рахе, а тот же код, но поменять Y на X попробуйте:

window.addEventListener('scroll', function() {
  document.getElementById('showScroll').innerHTML = pageXOffset + 'px';
});

[Алексей Рахе]

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

window.addEventListener 'scroll', () ->
	console.log 'scroll'

а значит, в сгенерированном js

window.addEventListener('scroll', function() {
return console.log('scroll');
});

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

Вопрос: что, блин, должно измениться от взятия кода из примера с обращением к элементу, которого у меня в примере НЕ существует, если то же самое событие просто-напросто НЕ ВЫЗЫВАЕТСЯ в моем примере при описанном мною кейсе?

[RAX7]

Алексей Рахе, добавь для body overflow-x: auto;

[Алексей Рахе]

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

[RAX7]

Алексей Рахе, а так https://codepen.io/RAX7/pen/jONjNzJ

[Алексей Рахе]

RAX7, так вызывается, но я положительно не понимаю, почему в сокращенном примере вызывается, а в полном нет)

preventDefault у меня не используются в событиях, по идее, ничего «мешать» не должно, тот же слушатель события у меня есть тоже...странно

[RAX7]

Алексей Рахе, событие scroll не всплывает. У тебя скролится document.body а событие ты ловишь на window, поэтому его там и нет. С этими скролами всегда какой-то подвох)

[Алексей Рахе]

RAX7, ааа, всё, получилось, действительно. это меня mousewheel сбили, их я на window вешал.

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

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

[RAX7]

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

[xmoonlight]

Алексей Рахе,

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

1. Мне за это не платят, чтобы я тартил время на изучение чужих исходников.
2. Когда Вам пытаются помочь бесплатно - следите за тоном общения.
3. Не нужно думать, что Вы - правы, если у Вас что-то не работает.
4. Проверяйте наличие/срабатывание событий в "чистом" виде (пустая страница + консоль). Читайте документацию чаще.
5. При вычислении инерции - используйте начальные и конечные события - АСИНХРОННО, вычисляя между ними временной интервал и другие изменившиеся свойства. На основе этого - строите график затухания и прогнозируете координаты останова (для инерционного скролла, например).

[Алексей Рахе]

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

выяснилось, что я отлавливал событие на window,а не на body, как было нужно