можно установить задержку на requestAnimationFrame ()? - PullRequest
Новая
       42

можно установить задержку на requestAnimationFrame ()?

0 голосов
/ 09 октября 2019

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

У меня есть следующеерабочий код: 

var ticking = false;
var box = document.getElementById('box1');

window.addEventListener('scroll', function() {
  ticking = ticking || requestAnimationFrame(function() {
    ticking = false;
    var top = window.scrollY;
    console.log(top);
    box.style.transform = 'translateY(' + top + 'px)';
    box.style.transition = 'all 100ms ease-out';
  }); 
});


#left {
  width: 200px;
  margin: 50px;
  position: relative;
  float: left;
}

#right {
  float: left;
  width: 800px;
  font-size: 200%;
}

#box1 {
  width: 100px;
  height: 100px;
  background: red;
  position: absolute;
  top: 50px;
}


<div class="outer">
  <div id="left">
    <div id="box1"></div>
  </div>
  <div id="right">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pulvinar sodales tortor non laoreet. Etiam facilisis enim nec eros imperdiet, nec ultrices magna ornare. Aliquam eget dictum arcu. Nulla et mauris vel massa venenatis mattis nec in orci. Pellentesque fringilla fermentum gravida. Praesent rhoncus augue sed lacus rutrum, tincidunt ultrices metus consectetur. Mauris pulvinar nec lacus sed interdum. Nullam fermentum massa consequat pretium maximus. Vestibulum ultrices nibh et venenatis pharetra. Quisque ipsum leo, rhoncus quis erat non, suscipit malesuada tellus. Nam commodo, dolor pretium malesuada scelerisque, nisl ante molestie est, in accumsan tortor massa quis lectus. Suspendisse nisi felis, commodo non porta eleifend, auctor at dui. Nullam ullamcorper sodales tortor, laoreet euismod arcu pretium sed.

Sed maximus scelerisque ornare. Quisque pellentesque tincidunt pellentesque. Cras eu convallis felis, sollicitudin bibendum mauris. Nulla volutpat dui in neque eleifend imperdiet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis blandit dictum euismod. Nam elementum metus non fermentum tincidunt. Integer enim mauris, porta eget nibh non, lacinia ornare elit. Proin justo justo, luctus sit amet dui non, feugiat euismod quam. Phasellus ullamcorper, lectus eu vestibulum feugiat, quam turpis egestas velit, ut hendrerit lectus justo a massa. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum varius neque blandit mi posuere tempor.

Suspendisse vitae sem non orci volutpat malesuada ac sit amet odio. Vestibulum faucibus lectus consectetur, rhoncus nisi in, venenatis lorem. Nullam bibendum nisl in enim pellentesque, sed gravida erat scelerisque. Ut scelerisque faucibus felis at posuere. Donec eget iaculis augue. Nunc venenatis elit vitae nisl suscipit, eu interdum tortor dignissim. Morbi ut nisl massa. Integer egestas sed tortor ac vulputate. Pellentesque tempor quam at purus scelerisque molestie. Cras cursus feugiat nulla. Pellentesque congue ligula lectus, nec condimentum magna tincidunt et. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer tempor mattis purus aliquet euismod. Suspendisse augue eros, pretium ut cursus eget, dapibus ut risus.

Duis et interdum libero, luctus ultrices ante. Nam vitae justo in nisi tempor mollis. Donec pharetra laoreet felis, in lacinia odio dignissim vitae. Phasellus aliquet, lectus id dignissim lobortis, lectus ipsum mollis massa, vitae semper magna ligula et sapien. Fusce interdum nibh ut purus vehicula porttitor. Vivamus et ante ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis sagittis elit. Curabitur bibendum suscipit enim, consequat varius ante pretium at. Vestibulum malesuada, est eu egestas dapibus, justo odio feugiat sem, id mollis metus est luctus risus. Maecenas vitae purus nulla. Vestibulum eu dolor vel nunc iaculis mollis. Curabitur at eros aliquet, sodales nunc sed, fringilla quam. Aenean odio felis, porta in bibendum vitae, mollis in est. Nam nisi risus, volutpat eu pharetra vel, scelerisque at mauris.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pulvinar sodales tortor non laoreet. Etiam facilisis enim nec eros imperdiet, nec ultrices magna ornare. Aliquam eget dictum arcu. Nulla et mauris vel massa venenatis mattis nec in orci. Pellentesque fringilla fermentum gravida. Praesent rhoncus augue sed lacus rutrum, tincidunt ultrices metus consectetur. Mauris pulvinar nec lacus sed interdum. Nullam fermentum massa consequat pretium maximus. Vestibulum ultrices nibh et venenatis pharetra. Quisque ipsum leo, rhoncus quis erat non, suscipit malesuada tellus. Nam commodo, dolor pretium malesuada scelerisque, nisl ante molestie est, in accumsan tortor massa quis lectus. Suspendisse nisi felis, commodo non porta eleifend, auctor at dui. Nullam ullamcorper sodales tortor, laoreet euismod arcu pretium sed.

Sed maximus scelerisque ornare. Quisque pellentesque tincidunt pellentesque. Cras eu convallis felis, sollicitudin bibendum mauris. Nulla volutpat dui in neque eleifend imperdiet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis blandit dictum euismod. Nam elementum metus non fermentum tincidunt. Integer enim mauris, porta eget nibh non, lacinia ornare elit. Proin justo justo, luctus sit amet dui non, feugiat euismod quam. Phasellus ullamcorper, lectus eu vestibulum feugiat, quam turpis egestas velit, ut hendrerit lectus justo a massa. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum varius neque blandit mi posuere tempor.

Suspendisse vitae sem non orci volutpat malesuada ac sit amet odio. Vestibulum faucibus lectus consectetur, rhoncus nisi in, venenatis lorem. Nullam bibendum nisl in enim pellentesque, sed gravida erat scelerisque. Ut scelerisque faucibus felis at posuere. Donec eget iaculis augue. Nunc venenatis elit vitae nisl suscipit, eu interdum tortor dignissim. Morbi ut nisl massa. Integer egestas sed tortor ac vulputate. Pellentesque tempor quam at purus scelerisque molestie. Cras cursus feugiat nulla. Pellentesque congue ligula lectus, nec condimentum magna tincidunt et. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer tempor mattis purus aliquet euismod. Suspendisse augue eros, pretium ut cursus eget, dapibus ut risus.

Duis et interdum libero, luctus ultrices ante. Nam vitae justo in nisi tempor mollis. Donec pharetra laoreet felis, in lacinia odio dignissim vitae. Phasellus aliquet, lectus id dignissim lobortis, lectus ipsum mollis massa, vitae semper magna ligula et sapien. Fusce interdum nibh ut purus vehicula porttitor. Vivamus et ante ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis sagittis elit. Curabitur bibendum suscipit enim, consequat varius ante pretium at. Vestibulum malesuada, est eu egestas dapibus, justo odio feugiat sem, id mollis metus est luctus risus. Maecenas vitae purus nulla. Vestibulum eu dolor vel nunc iaculis mollis. Curabitur at eros aliquet, sodales nunc sed, fringilla quam. Aenean odio felis, porta in bibendum vitae, mollis in est. Nam nisi risus, volutpat eu pharetra vel, scelerisque at mauris.</p>
  </div>
</div>

Codepen

, но вид элемента мигает во времяпрокрутки. Я предполагаю, что transform: translateY() изменяется так часто (хотя я вроде думал, что это было одной из основных причин использования requestAnimationFrame() ... чтобы браузер делал обновления только тогда, когда он мог с этим справиться). Я знаю, что удаление transition из CSS остановит это, но тогда я потеряю эффект "погони".

Есть ли способ установить задержку, как я мог бы с setTimeout() или setInterval(). ... или есть другой способ достижения этого эффекта? или если нет, то можно ли что-то сделать с мерцанием или это просто природа зверя?

1 Ответ

1 голос
/ 09 октября 2019

вам не нужно использовать requestAnimationFrame, когда вы используете CSS-переходы, они уже обрабатываются во время "кадра анимации". просто добавьте задержку к transitionDelay: 

window.addEventListener('scroll', function() {
    var top = window.scrollY;
    console.log(top);
    box.style.transform = 'translateY(' + top + 'px)';
    box.style.transition = 'all 100ms ease-out 1s';
});

поле мигает, потому что оно прыгает всего на несколько пикселей и уже ослабевает, прежде чем перейти к следующей точке

...