我设置了CSS滚动捕捉，如果可能的话，我想实现它的缓动。一旦它捕捉到一个点，它就会滚动得太快。有没有办法使用CSS、JavaScript或外部动画库来调整滚动捕捉速度/缓动？我的项目是一个ASP.NET Core 5 MVC Web应用程序。
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>我建议扩展这个代码片段，以便更好地查看效果。
2条答案
按热度按时间vcudknz31#
我们只想到了以下CSS属性，尽管它没有提供太多定制功能：
在the w3schools page for this property上，你可能会对一些javascript代码感兴趣，向下滚动到 * 跨浏览器解决方案 * 部分;它列出了一个替代脚本，该脚本使用CSS
animate来控制滚动位置，这将允许您完全控制滚动速度。z5btuh9x2#
不，css的scroll snap属性不允许这样做，你需要在javascript中使用touch事件，比如你有一个图像转盘，你需要使用translate3d来移动它，你需要一个css的reasing属性，你需要编写自己的逻辑来决定什么时候根据用户在那个区域的滑动方式来启动。