如何在滚动到指定区块时触发Splide.js的自动播放？

核心思路 #

• 初始关闭自动播放，通过IntersectionObserver API（比传统scroll监听性能更优）检测目标区块是否进入视口
• 当区块进入视口时调用Splide的play()方法启动自动播放，离开视口时可选择暂停播放

修改后的完整代码 #

document.addEventListener('DOMContentLoaded', function () {
  var splide = new Splide('.splide', {
    perPage: 1,
    perMove: 1,
    focus: 0,
    autoplay: false, // 初始关闭自动播放
    interval: 8000,
    gap: '2.5rem',
    arrows: 'slider',
    pagination: false,
    speed: 600,
    rewind: true,
    rewindSpeed: 1200,
    updateOnMove: true
  });
  splide.mount();

  // 获取目标区块（这里假设是splide容器本身，可根据实际需求修改选择器）
  const targetSection = document.querySelector('.splide');
  
  // 创建IntersectionObserver实例
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        // 区块进入视口，启动自动播放
        splide.play();
        // 如果只需要触发一次播放，可取消监听：observer.unobserve(targetSection);
      } else {
        // 区块离开视口，暂停自动播放（可选，根据需求决定是否保留）
        splide.pause();
      }
    });
  }, {
    threshold: 0.3 // 当区块有30%进入视口时触发，可调整阈值
  });

  // 开始监听目标区块
  observer.observe(targetSection);
});

关键细节说明 #

1. 修正autoplay参数：原代码中autoplay: 'true'是字符串类型，Splide要求该参数为布尔值，需改为autoplay: false（初始关闭）
2. 目标区块选择：如果需要监听的不是Splide容器本身，而是其父级区块，修改document.querySelector('.splide')为对应选择器即可
3. 阈值调整：threshold参数控制触发条件，0表示区块刚进入视口就触发，1表示完全进入才触发，可根据需求调整
4. 单次触发控制：如果只需要在第一次滚动到区块时启动播放，取消注释observer.unobserve(targetSection)即可

内容的提问来源于stack exchange，提问作者neil