如何在网站上更改滚动行为（例如速度，加速度）？

Question

如何在网站上修改滚动行为？我想完成一个加速滚动行为，你可以在示例中看到它。因此，您以一定的速度滚动，放开后页面会自动滚动一点，减速并停止。

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

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

Answer 1

你有2种方法可以实现这一目标。你可以使用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/

希望能帮助到你。

Answer 2

您可以使用jquery执行此操作。

css属性实际上导致了延迟，因此您可以使用它来调整延迟。

  transition-duration: 500ms;

参考：

transition-duration CSS属性设置转换动画完成所需的时间长度。默认情况下，该值为0，表示不会发生动画。

$(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>