时间戳

首页 > 解决方案 > CSS snap scroll：如何在 div 中间诱导 snap 滚动？

javascript - CSS snap scroll：如何在 div 中间诱导 snap 滚动？

问题描述

我有一个网站，可以在其中转换滚动标题。我现在正致力于实现 CSS snap 滚动到整个站点。因此，当用户向下滚动时，javascript 中的滚动事件显然不会被触发。我该如何解决这个问题？

我对此很陌生，所以我还没有尝试过使用任何库，并且想暂时避免这种情况。

标签： javascripthtmlcss

解决方案

滚动捕捉不会干扰滚动事件。请参阅此CodePen以获得最小的工作示例。打开控制台并滚动，您将看到滚动事件触发。

document.addEventListener('scroll', (event) => console.log(event));
body {
  margin: 0;
  scroll-snap-type: y mandatory;
}

div {
  height: 100vh;
  scroll-snap-align: start;
}

div:nth-child(odd) {
  background-color: #7FDBFF ;
}
<html>
  <body>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
  </body>
</html>

你能提供一个代码示例来解决你的具体问题吗？这将使您更容易为您提供帮助。

推荐阅读