javascript - 如何更改网站上的滚动行为(例如速度、加速度)？

Question

网站上修改后的滚动行为是如何制作的？正如您在示例中看到的那样，我想完成加速滚动行为。所以你以一定的速度滚动，当你放手之后，页面会自行滚动一点，减速并停止。

不幸的是，我绝对没有根据为您提供代码，希望您仍然可以帮助我。也许你可以给我推荐一些js插件？

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

Answer 1

您有两种方法可以实现这一目标。你可以使用 CSS

html { scroll-behavior: smooth; }

或者你可以使用 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-tricks.com/snippets/jquery/smooth-scrolling/