我有一个很长的版面（即，垂直方向上较大的页面），其中一列为文本，另一列为浮动元素。所需的效果是使浮动元素“跟随”窗口的滚动，并最终（当滚动停止时）最终返回到其从视口顶部开始的原始偏移处。]
我有以下代码在工作：
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>
但是元素种类在滚动过程中闪烁。我的猜测是因为transform: translateY()的修改如此频繁（尽管我有点以为这是使用requestAnimationFrame()的主要原因的一部分，以确保浏览器仅在可以处理时才进行更新）。我知道从CSS中删除transition会停止此操作，但是随后我失去了“追逐”效果。
[有没有办法像我使用setTimeout()或setInterval()那样设置延迟...，或者我应该以其他方式实现这种效果吗？否则，是否可以对闪烁进行任何处理？或者仅仅是野兽的本质？
我有一个很长的版面（即，垂直方向上较大的页面），其中一列为文本，另一列为浮动元素。所需的效果是使浮动元素“追赶” ...
使用css过渡时，您无需使用requestAnimationFrame，它们已在“动画帧”期间处理。只需将延迟添加到transitionDelay：