如何获得平滑滚动(不锚定)?

时间:2018-09-21 22:11:02

标签: javascript html css

我看到了一些网站(苹果在after exceptional materials title上获得了一些收益),其中一个简单的滚动即可移动元素,而不仅仅是跳跃,而是过渡。通过过渡我也获得了这种效果,但是

const elem = document.querySelector("p");
window.onscroll = () => {
  const wT = window.pageYOffset;
  elem.style.transform = `translateY(-${wT}px)`
}
p {
  margin: 20vw;
  transition: all .5s ease;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae elementum curabitur vitae nunc. Ut enim blandit volutpat maecenas volutpat blandit aliquam etiam erat. Vestibulum rhoncus
  est pellentesque elit ullamcorper dignissim cras tincidunt lobortis. Semper feugiat nibh sed pulvinar proin gravida. Viverra maecenas accumsan lacus vel facilisis volutpat. Nisl vel pretium lectus quam id leo in vitae. Viverra orci sagittis eu volutpat.
  Sodales neque sodales ut etiam. A condimentum vitae sapien pellentesque habitant morbi tristique senectus. Lectus arcu bibendum at varius. Egestas fringilla phasellus faucibus scelerisque. Lectus urna duis convallis convallis tellus id interdum velit
  laoreet. Malesuada fames ac turpis egestas. Nulla facilisi cras fermentum odio eu feugiat pretium nibh ipsum. Placerat duis ultricies lacus sed turpis. Arcu odio ut sem nulla pharetra diam. Risus quis varius quam quisque id diam vel quam. Nisi porta
  lorem mollis aliquam ut porttitor leo a. Quis imperdiet massa tincidunt nunc pulvinar. Enim nec dui nunc mattis enim. Tellus molestie nunc non blandit massa. Lacus viverra vitae congue eu consequat ac. Eu mi bibendum neque egestas congue quisque egestas
  diam. Pharetra pharetra massa massa ultricies mi quis hendrerit dolor. Pharetra vel turpis nunc eget. Ipsum dolor sit amet consectetur. Phasellus faucibus scelerisque eleifend donec pretium vulputate sapien. Convallis posuere morbi leo urna molestie
  at elementum eu facilisis. Aenean sed adipiscing diam donec adipiscing tristique risus nec feugiat. Faucibus scelerisque eleifend donec pretium vulputate sapien nec. Vulputate enim nulla aliquet porttitor lacus. Adipiscing tristique risus nec feugiat
  in fermentum. Justo nec ultrices dui sapien eget mi proin. Adipiscing at in tellus integer feugiat scelerisque varius morbi enim.</p>

如您所见,

这就像两个阶段,即使您快速滚动或快速更改滚动方向也不是那么平滑。您是否知道如何获得上面链接所示的平滑效果?

0 个答案:

没有答案