admin管理员组

文章数量:1325505

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 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 remend expanding the snippet to see the effect better.

Share Improve this question asked Dec 28, 2021 at 0:44 Ethan PartridgeEthan Partridge 2071 gold badge5 silver badges13 bronze badges 3
  • Does this not help for the general layout of how this should be acplished?...seems relatively straightforward css-tricks./practical-css-scroll-snapping I'm not sure noting that you use is relevant for this issue – ViaTech Commented Dec 28, 2021 at 0: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 Commented Dec 28, 2021 at 0:52
  • similar question. answered stackoverflow./questions/67180281/… – Anonymouse Lovecat Commented Dec 21, 2022 at 6:54
Add a ment  | 

1 Answer 1

Reset to default 1

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.

本文标签: javascriptIs it possible to adjust css scrollsnap speedeasingStack Overflow