相关疑难解决方法(0)

CSS Scroll-Snap API?

我很好奇……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)

javascript css dom-events

9
推荐指数
1
解决办法
2374
查看次数

标签 统计

css ×1

dom-events ×1

javascript ×1