如何在网站上更改滚动行为(例如速度，加速度)? [英] How to change scroll behavior (e.g. speed, acceleration) on website?

问题描述

如何在网站上进行修改后的滚动行为?我想完成一个加速的滚动行为，如您在示例中所看到的.因此，您以一定的速度滚动，放开后，页面会单独滚动一点，减速并停止.

How are the modified scroll behaviors on websites made? I want to accomplish an accelerated scroll behavior as you can see it in the example. So you scroll in a certain speed and after you let go the page scrolls a little more by its own, slows down and stops.

不幸的是，我绝对没有基础为您提供代码，希望您仍然可以帮助我.也许您可以向我推荐一些js插件?

Unfortunately I have absolutely no basis to provide you with code, I hope you can still help me. Maybe you can recommend me some js plugins?

https://p2mv.studio/case/sony-music-france

推荐答案

您有两种方法可以实现此目的.您可以使用CSS

You have 2 ways of achieving this. You can use CSS

html { scroll-behavior: smooth; }

或者您可以使用JavaScript:

or you can use JavaScript:

// Scroll to specific values
// scrollTo is the same
window.scroll({
  top: 2500, 
  left: 0, 
  behavior: 'smooth'
});

// Scroll certain amounts from current position 
window.scrollBy({ 
  top: 100, // could be negative value
  left: 0, 
  behavior: 'smooth' 
});

// Scroll to a certain element
document.querySelector('.hello').scrollIntoView({ 
  behavior: 'smooth' 
})

您可以在此处阅读更多信息并找到更多示例: https://css-tipss.com/snippets/jquery/smooth-scrolling/

You can read more and find more examples here: https://css-tricks.com/snippets/jquery/smooth-scrolling/

希望有帮助.

这篇关于如何在网站上更改滚动行为(例如速度，加速度)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！