twitter-bootstrap-3 - 如何保持引导轮播暂停直到它进入视口(viewport)？

Question

编辑:此请求的原因。为了描述我的需求，在找到解决方案时添加了此编辑。我有一个轮播，它显示了逻辑顺序第 1 步、第 2 步、第 3 步 .. 该轮播不是页面顶部，所以我希望它保持停止/暂停，直到用户看到它以及何时看到它，如首先，我希望用户看到第一张幻灯片，第 1 步。尽管如此，一些用户(相信我，他们不是少数)不了解轮播和 slider ，所以我不想错过他们对后续的看法幻灯片。这就是后面的原因。

我想知道这个

我有一个 Bootstrap 3.1 轮播，它是 不是 在主页顶部。

相反，您在向下滚动一些“ Bootstrap ”行时“到达它”。

好吧，我希望它保持轮播停止/暂停，直到用户将页面向下滚动到放置轮播的位置(假设轮播高度为 500 像素，此时至少前 150 个像素输入可见区域)

当滚动了这 150 像素时，暂停/停止应该变成“播放”，因此，如果每张幻灯片之间的暂停时间为 5000 毫秒，则在 5000 毫秒后，下一张幻灯片应该转动。

根据 this solution这是 javascript 的问题，但这不是我想要的，也请原谅，但目前我对 javascript 和 jquery 的能力并不强，所以感谢您提供任何解释的提示。

编辑 01
This script看起来是正确的，也是一个很好的解决方案:-)，尤其是阅读该页面底部的评论，但如上所述，我错过了正确利用它的知识，谢谢你的任何提示。

Answer 1

这是使用 Intersection Observer API 的方法;对于 IE 和其他不受支持的浏览器，它将静默失败。

setTimeout(function() {
  if (IntersectionObserver === undefined) return;
    const carousels = $(".carousel");
    if (carousels.length === 0) return;
    const RATIO = 0;
    // You can set a intersection percentage, such as 0.25 for 25% visible, but 
    // if you want pixels, I'm using `rootMargin` in the options below
    var observer = new IntersectionObserver(function (entries, observer) {
        entries.forEach(function(entry) {
            jQuery(entry.target).carousel(entry.intersectionRatio < RATIO ? 'pause' : 'cycle');
        });
    }, {
            root: null,
            rootMargin: '-150px 0px', // 150px visible on top or bottom of viewport
            threshold: RATIO
        });
    carousels.each(function () {
        observer.observe(this);
    });
  }
});