如何更改网站上的滚动行为（例如速度、加速度）？答案

【问题标题】：How to change scroll behavior (e.g. speed, acceleration) on website?如何更改网站上的滚动行为（例如速度、加速度）？
【发布时间】：2019-08-23 15:41:58
【问题描述】：

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

很遗憾，我完全没有根据给你提供代码，希望你仍然可以帮助我。或许你可以给我推荐一些js插件？

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

【问题讨论】：

标签： javascript scroll parallax behavior motion

【解决方案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/

【讨论】：

请注意，滚动函数中的设置行为由 jQuery 支持，而不是原生 Javascript。
所以...只有 2 个选项？即时且“流畅”？

【解决方案2】：

你可以试试这个：Nicescroll jQuery Plugin。

这个库实现了加速滚动。下载并导入脚本，然后添加以下内容：

$("body").niceScroll();

【讨论】：

【解决方案3】：

您可以使用 jquery 简单地做到这一点。

实际上是css属性造成了延迟，所以你可以用它来调整延迟。

  transition-duration: 500ms;

参考：

transition-duration CSS 属性设置时间长度过渡动画应该完成。默认情况下，该值为 0s，表示不会出现动画。

$(document).on('mousemove', (event) => {
  $('.cursor').css({
    top: event.clientY,
    left: event.clientX,
  });
});

.cursor {
  transition-timing-function: ease-out;
  background-color: red;
  border-radius: 5px;
  height: 10px;
  transition-duration: 500ms;
  transform: translateX(-50%) translateY(-50%);
  position: fixed;
  width: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cursor"></div>

【讨论】：