Используйте прокрутку для преобразования: translateY с привязкой вверху - PullRequest
Новая
       19

Используйте прокрутку для преобразования: translateY с привязкой вверху

0 голосов
/ 06 марта 2019

Я пытаюсь создать страницу с пользовательской прокруткой, в которой разделы перемещаются вверх, перекрывая предыдущий, используя transform translateY.

У меня есть все мои разделы внизу страницы, как показано на этом рисунке (https://i.stack.imgur.com/kYH0I.png), с 8 пикселями разницы по вертикали.

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

Я делаю это внутри события прокрутки, чтобы получить положение полосы прокрутки с помощью window.pageYOffset и соответственно переместить секцию.

Проблема возникает при использовании плавной прокрутки, например, трекпада или мыши Mac. Я пишу здесь мой код: 

if (currentScrollValue <= topSnapPoint {
    section.style.transform = `translateY(${currentScrollValue})`
} else {
    section.style.transform = `translateY(${topSnapPoint})`
}

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

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

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

Если вам нужна дополнительная информация, или я не дал понять, пожалуйста, просто дайте мне знать.

Любая помощь будет принята с благодарностью. Спасибо!

...