Is it possible to adjust css scroll-snap speed/easing?

Question

I set up CSS Scroll Snap, and I would like to implement easing to it, if possible. Once it snaps to a point, it scrolls too fast. Is there any way to adjust scroll-snap speed/easing using CSS, JavaScript, or an external animation library? My project is an ASP.NET Core 5 MVC web application.

html, body {
  margin: 0;
  padding: 0;
  scroll-snap-type: y proximity;
}

.landing-page-content {
  scroll-snap-align: center;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.landing-page-content h1 {
  color: black;
  margin: 0;
}

.s1 {
  background-color: red;
}

.s2 {
  background-color: yellow;
}

.s3 {
  background-color: blue;
}

.s4 {
  background-color: green;
}

.background-image {
  background-image: url(..pathToImage);
  position: absolute;
  top: 0px;
  right: 0px;
  height: 100%;
  width: 100vw;
  background-repeat: no-repeat;
  z-index: -1;
}

<body>
  <div class="background-image"></div>
  <section class="landing-page-content s1">
    <h1>Section One</h1>
  </section>
  <section class="landing-page-content s2">
    <h1>Section Two</h1>
  </section>
  <section class="landing-page-content s3">
    <h1>Section Three</h1>
  </section>
  <section class="landing-page-content s4">
    <h1>Section Four</h1>
  </section>
</body>

I would recommend expanding the snippet to see the effect better.

Does this not help for the general layout of how this should be accomplished?...seems relatively straightforward https://css-tricks.com/practical-css-scroll-snapping/ I'm not sure noting that you use .net is relevant for this issue — ViaTech, Dec 28 '21 at 00:47
@ViaTech unless I'm missing something in the article, it talks about setting up specific snap points, but doesn't say anything about how to adjust the actual scroll speed. My issue is that it is scrolling faster than I would like, so I wanted to apply some sort of easing effect once that snap point is hit. — Ethan Partridge, Dec 28 '21 at 00:52
similar question. **answered** https://stackoverflow.com/questions/67180281/cannot-change-horizontal-scroll-snap-into-vertical-scroll-snap — Anonymouse Lovecat, Dec 21 '22 at 06:54

score 1 · Answer 1 · answered Dec 21 '22 at 00:31

No, the css scroll snap property does not allow that. You would need to use touch events with javascript. If you had an image carousel for example you would use translate3d to move it and you would have an easing css property. You would have to write your own logic though to decide when that should kick in based on the way the user swipes in that area.

score 0 · Answer 2 · answered Jul 14 '23 at 11:03

The CSS scroll-snap property does not directly provide options for adjusting scroll speed or easing. However, you can achieve custom scroll behavior by combining scroll-snap with JavaScript and CSS animations.

Here's an example of how you can adjust the scroll speed and easing using CSS animations:

JS:

const container = document.querySelector('.scroll-container');
const items = document.querySelectorAll('.scroll-item');

container.addEventListener('wheel', (event) => {
  event.preventDefault();
  const delta = event.deltaY;

  container.scrollBy({
    top: delta,
    behavior: 'smooth'
  });
});

CSS:

.scroll-container {
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  height: 300px;
  scroll-behavior: smooth;
}

.scroll-item {
  height: 300px;
  scroll-snap-align: start;
}

@keyframes scroll {
  0% { transform: translateY(0); }
  100% { transform: translateY(-100%); }
}

HTML:

<div class="scroll-container">
  <div class="scroll-item">Item 1</div>
  <div class="scroll-item">Item 2</div>
  <div class="scroll-item">Item 3</div>
</div>

In this example, we use CSS animations to create a custom scrolling effect. The JavaScript code listens for the wheel event on the scroll container and adjusts the scroll position accordingly. By modifying the delta value, you can control the speed of the scroll. Additionally, you can add easing functions to the CSS animation to customize the easing effect further.

Please note that this approach requires JavaScript, and it overrides the default scroll behavior. It provides more flexibility but may require additional effort to implement compared to using only CSS scroll-snap.

Is it possible to adjust css scroll-snap speed/easing?

2 Answers2