我很好奇……CSS scroll-snap 属性是否有可以通过 JavaScript 连接的 API(事件)?
我正在修补创建一个使用滚动快照在 100vh“幻灯片”之间移动的网站的想法。每张幻灯片完成“滚动捕捉”后,我想触发动画。
我确信有一些巧妙的方法可以检查每个“幻灯片”以查看它是否占据了 100% 的视口,但这种方法很糟糕。在滚动事件完成后触发一个函数会好得多。
这是一个超级简单的例子:
$(document).ready(function() {
let slideNumber = $('.container > .slide').length;
if (slideNumber > 0) {
$('.container > .slide').each(function() {
$('#dotNav').append('<li><a href="#slide' + $(this).index() + '"></a></li>');
});
}
//DO SOMETHING AFTER SCROLL-SNAP IS COMPLETE.
});Run Code Online (Sandbox Code Playgroud)
html {
scroll-behavior: smooth;
}
body {
box-sizing: border-box;
scroll-snap-type: y mandatory;
}
.container {
width: 100%;
scroll-snap-type: y mandatory;
position: relative;
.slide {
height: 100vh;
width: 100%;
background: #cccccc;
scroll-snap-align: center;
display: flex;
justify-content: center; …Run Code Online (Sandbox Code Playgroud)