После использования requestAnimationFrame и отмены события прокрутки параллакс становится изменчивым кросс-браузерным - PullRequest
Новая
       9

После использования requestAnimationFrame и отмены события прокрутки параллакс становится изменчивым кросс-браузерным

0 голосов
/ 11 января 2019

Я пытаюсь выяснить, почему после отмены прокрутки и использования requestAnimationFrame я не вижу отличной кросс-браузерной совместимости.

Мне кажется, что я много занимался поиском этой конкретной проблемы, и на эту тему есть много сообщений, но ни один из них не помог мне. Также следует отметить, что все примеры, с которыми я сталкивался, используют PNG для параллакса. Мой конкретный проект использует SVG для масштабируемости, я предпринял все шаги, чтобы убедиться, что SVG имеют как можно меньший размер файла (самый большой - 57 КБ), но это ничего не решило. У меня проблема с кросс-браузерной совместимостью. В Chrome все работает довольно хорошо, однако в FireFox и Safari части параллакса «подпрыгивают» или запаздывают после обновления прокрутки. Я немного не уверен, что это моя проблема, потому что я знаю, что в Chrome нет плавной прокрутки, и я не знаю, как решить проблему прокрутки в разных браузерах.

Все это говорит, мне интересно, что я делаю не так. 

let ticking = false;
let lastKnownScrollY = 0;

const requestAnimate = () => {
  if(!ticking) {
    requestAnimationFrame(update)
  }
  ticking = true;
}
const updateScroll = () => {
  lastKnownScrollY = $(window).scrollTop();
  requestAnimate();
}
const update = () => {
  let currentScrollY = lastKnownScrollY;
  ticking = false;
  //This function passes the current scroll position as an argument to my 
  //function that updates the translate3D Y values
  animatedElements(currentScrollY)
}
$(window).on('scroll', updateScroll)

Итак, здесь я сослался на эту статью https://www.html5rocks.com/en/tutorials/speed/animations/, чтобы отменить событие прокрутки, и обновлять requestAnimationFrame только тогда, когда его нужно обновить, чтобы убедиться, что оно не складывается. Ожидаемый результат - лучшая производительность и исправление эффекта «отскока», который происходит на некоторых моих слоях в FireFox и Safari. Фактические результаты - это то, чего не происходит.

...