最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Is it possible to adjust css scroll-snap speedeasing? - Stack Overflow

programmeradmin2浏览0评论

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.

发布评论

评论列表(0)

  1. 暂无评论