如何保持引导轮播暂停直到它进入视口？答案

【问题标题】：How to keep bootstrap carousel paused until it enters in the viewport?如何保持引导轮播暂停直到它进入视口？
【发布时间】：2015-06-26 08:31:52
【问题描述】：

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

我在想这个

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

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

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

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

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

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

【问题讨论】：

您好！对此有何帮助？

标签： twitter-bootstrap-3 carousel

【解决方案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);
    });
  }
});

【讨论】：

这是获得最高性能的最佳答案，而不是在滚动时运行数千次检查，只需添加您的 polify 或不要因为明年 IE 终于消失了，每个人都会很高兴。跨度>

【解决方案2】：

我走了很长的路，自己回答了自己。

我尝试了几个插件，但它们都没有效果，或者它们破坏了 Carousel 引擎。

研究了这么多，终于找到了这个jQuery插件 http://www.jqueryscript.net/other/jQuery-Plugin-To-Determine-If-An-Element-Is-In-the-Viewport-Viewport-Checker.html

它工作得非常好，笔直且符合预期，并且包括一个奖励：我正在寻找的偏移量！！！（耶！）

很容易实现

<script src="viewportchecker.js"></script>

<script type="text/javascript">
$(document).ready(function(){
    $('.carousel').carousel('pause'); /** load page with carousel paused

    $('.carousel').viewportChecker({
        offset: 200,                  /** wait for the first 200 pixel of the element 
                                          to enter in the viewport
        callbackFunction: function(elem){
            setTimeout(function(){
                $('.carousel').carousel(''); /** remove pause
            },500);
        }
    });

});
</script>

对自己说“谢谢”:-)

【讨论】：

【解决方案3】：

我想当视口将旋转木马切成两半时，这也有助于解决问题。即：在页面顶部有一个轮播，然后向下滚动，强制浏览器窗口的顶部只显示轮播的下半部分。

目前，当轮播循环时，轮播图像会加载到视口的顶部，而不是轮播容器的顶部。

当您向上滚动时，轮播仅显示一半图像，上半部分为灰色。这很烦人。将尝试这个，看看它是否修复。

【讨论】：