如何保持 bootstrap 旋转木马暂停，直到它进入视口？

Question

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

我想知道这个

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

相反，您 "reach it" 向下滚动一些 "bootstrap' rows"。

好吧，我想让轮播保持停止/暂停状态，直到用户将页面向下滚动到放置轮播的位置（假设轮播高度为 500 像素，至少前 150 像素时进入可视区域）

当这 150 个像素已经滚动时，暂停/停止应该变成 "play" 因此，如果每张幻灯片之间的暂停是 5000 毫秒，5000 毫秒后下一张幻灯片应该转动。

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

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

Answer 1

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

我尝试了几个插件，但它们都没有效果，或者它们破坏了 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>

"thank you" 对我自己:-)

Answer 2

我想这也有助于解决视口将旋转木马切成两半的问题。即：在页面顶部有一个旋转木马，然后向下滚动，迫使浏览器顶部 window 仅显示旋转木马的下半部分。

目前，当旋转木马循环时，旋转木马图像加载到视口的顶部，而不是旋转木马容器的顶部。

当您向上滚动时，轮播只显示一半的图像，上半部分是灰色的。这很烦人。将尝试此操作以查看是否修复。

Answer 3

这是一个使用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);
    });
  }
});

如何保持 bootstrap 旋转木马暂停，直到它进入视口？

How to keep bootstrap carousel paused until it enters in the viewport?

carousel

twitter-bootstrap-3