CSS 快照滚动:如何在 div 中间诱导快照滚动?



我有一个网站,我可以在滚动时转换标题。我现在正在努力实现CSS快照滚动到整个网站。正因为如此,当用户向下滚动时,javascript 中的滚动事件显然不会被触发。我该如何解决这个问题?

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

滚动捕捉不会干扰 scrollEvent。请参阅此代码笔以获取最小的工作示例。打开控制台并滚动,在那里你会看到滚动事件正在触发。

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>

您能否提供针对您的特定问题的代码示例?这将使您更容易获得帮助。

最新更新