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

Question

网站上的修改滚动行为是如何做出的？我想实现加速滚动行为，正如您在示例中看到的那样。因此，您以一定的速度滚动，松开鼠标后，页面会自行滚动一点，减慢速度，然后停止。

不幸的是，我完全没有依据向您提供代码，但我希望您仍然可以帮助我。也许你可以给我推荐一些 JavaScript 插件？

演示

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/

Answer 2

您可以使用 CSS 将

scroll-behavior: smooth;

应用于您想要平滑滚动行为的容器。

您可以通过向容器内的子元素添加过渡来进一步操纵滚动的速度。如果您使用 Javascript 操作子元素的位置，您只需添加一个过渡，例如

transition: left 1s;

，其中

left

是您希望过渡的 CSS 属性，

1s

是时间（以秒为单位）。

Answer 3

使用 jQuery，从按钮 (class="to-id") 滚动到标题 (id="myID")。

<input class="to-id" name="contact_owner" value="Contact" />

<h1 id="myID">


<!-- scroll to ID -->
<script>            
    jQuery(document).ready(function() {
    
        jQuery('.to-id').click(function(event) {
            event.preventDefault();
            $('html, body').animate({scrollTop:$('#myID').position().top}, 1000);
            return false;
        })
    });
</script>

Answer 4

你可以试试这个：Nicescroll jQuery 插件。

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

$("body").niceScroll();

Answer 5

您可以简单地使用 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>