Twitter bootstrap 3 如何使引导转盘在进入视口之前一直处于暂停状态？

编辑：此请求的原因。为了描述我的需求，在找到解决方案时添加了此编辑。我有一个旋转木马，显示了一个逻辑顺序步骤1，步骤2，步骤3。。该旋转木马不是页面的顶部，因此我希望它保持停止/暂停状态，直到用户看到它以及它将看到它时为止，就像第一次一样，我希望用户看到第一张幻灯片，步骤1。尽管如此，一些用户（相信我，他们不是少数）不知道旋转木马和滑块，所以我不想错过他们在后续幻灯片上的观点。这就是接下来发生的事情的原因

我想知道这件事

我有一个bootstrap3.1旋转木马，它在主页顶部是而不是

相反，当向下滚动一些“引导”行时，您可以“到达”

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

当这150个像素被卷进时，暂停/停止应变为“播放”，因此，如果每张幻灯片之间的暂停为5000毫秒，5000毫秒后，下一张幻灯片应开始播放

与之相一致的是javascript的问题，但这不是我要寻找的，也请原谅，但目前我对javascript和jquery不太在行，所以感谢您的任何提示和一些解释

编辑01

---

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

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

我尝试了几个插件，但都没有效果，或者是它们破坏了旋转木马引擎

经过大量研究，我终于找到了这个jQuery插件

它工作得很好，笔直，正如预期的那样，还有一个额外的好处：我正在寻找的补偿！！！（耶！）

很容易实现

<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>

$（文档）.ready（函数（）{
$（'.carousel'）。carousel（'pause'）；/**加载已暂停carousel的页面
$（'.carousel'）.viewportChecker({
偏移量：200，/**等待元素的前200个像素
在视口中输入的步骤
callbackFunction:function（elem）{
setTimeout（函数（）{
$（'.carousel'）。carousel（''）；/**删除暂停
},500);
}
});
});

---

“谢谢你”对我自己说：-）

我想当视口将旋转木马一分为二时，这也会有助于解决问题。ie：页面顶部有一个旋转木马，你向下滚动，迫使浏览器窗口的顶部只显示旋转木马的下半部分

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

向上滚动时，转盘仅显示一半图像，上半部分为灰色。这很烦人。将尝试此操作以查看是否修复

这里有一个使用的方法；对于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);
    });
  }
}

setTimeout（函数（）{
if（IntersectionObserver===未定义）返回；
固定旋转木马=$（“.carousel”）；
如果（carousels.length==0）返回；
常数比=0；
//可以设置交点百分比，例如0.25表示25%可见，但
//如果你想要像素，我在下面的选项中使用'rootMargin'
var observer=新的IntersectionObserver（函数（条目，观察者）{
entries.forEach（函数（entry）{
jQuery（entry.target）.carousel（entry.intersectionRatio

您好！有什么帮助吗？这是获得最佳性能的最佳答案，而不是在滚动时运行数千次检查，只需添加您的polify或don't，因为IE终于在明年消失了，每个人都会很高兴。