CSS 滚动捕捉 API？

Posted 2023-03-05

【中文标题】CSS 滚动捕捉 API？

【英文标题】：CSS Scroll-Snap API?

【发布时间】：2019-07-14 19:24:30

【问题描述】：

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

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;
    align-items: center;
    color: #000000;
    &:nth-child(odd) 
      background: blue;
      h2 
        color: #ffffff;
      
    
    h2 
      margin: 0;
      font-size: 40px;
      text-transform: uppercase;
    
  
  ul#dotNav 
    position: fixed;
    top: 50%;
    right: 20px;
    list-style: none;
    li 
      width: 20px;
      height: 20px;
      margin-bottom: 10px;
      cursor: pointer;
      a 
        display: block;
        width: 100%;
        height: 100%;
        background: #ffffff;
        border-radius: 50%;
      
    
    li.active 
      background: #000000;
    
  

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="slide" id="slide0">
    <h2>Slide 1</h2>
  </div>
  <div class="slide" id="slide1">
    <h2>Slide 2</h2>
  </div>
  <div class="slide" id="slide2">
    <h2>Slide 3</h2>
  </div>
  <ul id="dotNav">
  </ul>
</div>

你可以在这里看到它的工作原理：

https://codepen.io/trafficdaddy/pen/BMGBBg

希望有人有答案！ :)

【问题讨论】：

来自 Google 开发者页面：“即将提出更改各种滚动 API 以返回承诺的提议。当用户代理完成或中止滚动操作时，此承诺将得到解决。一旦标准化并实施，它提供了一种符合人体工程学且有效的方式来跟踪用户脚本启动的滚动以及其他操作。” developers.google.com/web/updates/2018/07/css-scroll-snap

好吧，我猜你去吧！ :) 非常感谢你找到这个！我想我将不得不玩很长的路线，直到它被释放。

【参考方案1】：

您可以使用IntersectionObserver：

document.addEventListener("DOMContentLoaded", () => 
    (function scrollSpy() 
        const targets = document.querySelectorAll(".section"),
        options = 
          threshold: 0.5
        ;
        // check if IntersectionObserver is supported
        if ("IntersectionObserver" in window) 
        (() => 
        const inView = target => 
        const interSecObs = new IntersectionObserver(entries => 
            entries.forEach(entry => 
            if(entry.isIntersecting) 
               fireyourfunction();
            
            );
        , options);
        interSecObs.observe(target);
        ;
        targets.forEach(inView);
        )();
        
    )();
);