gpt4 book ai didi

javascript - CSS 快速滚动 : How do I induce the snap scrolling in the middle of a div?

转载 作者:行者123 更新时间:2023-11-28 19:19:10 25 4
gpt4 key购买 nike

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

我对此很陌生,所以我还没有尝试使用任何库,并且想暂时避免使用它。

最佳答案

Scrollsnapping 不会干扰 scrollEvent。请看这个CodePen一个最小的工作示例。打开控制台并滚动,您会看到 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>

你能提供一个代码示例来解决你的具体问题吗?这样可以更轻松地为您提供帮助。

关于javascript - CSS 快速滚动 : How do I induce the snap scrolling in the middle of a div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57680314/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com