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.

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

回答1:

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

html { scroll-behavior: smooth; }

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' 
})

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

Hope it helps.

回答2:

You can try this: Nicescroll jQuery Plugin.

This library implements accelerated scrolling. Download and import the scripts, and then add the following:

$("body").niceScroll();

回答3:

You can simply do this using jquery.

The css property is actually causing the delay, so you can adjust the delay with it.

  transition-duration: 500ms;

Reference:

The transition-duration CSS property sets the length of time a transition animation should take to complete. By default, the value is 0s, meaning that no animation will occur.

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

来源：https://stackoverflow.com/questions/55472649/how-to-change-scroll-behavior-e-g-speed-acceleration-on-website

标签

javascript

scroll

parallax

behavior

motion