Question

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

我想知道这个

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

相反，当你向下滚动一些“bootstrap”行时，你会“到达它”。

好吧我想让旋转木马停止/暂停，直到用户将页面向下滚动到放置旋转木马的位置（假设旋转木马高度为500像素，至少输入前150个像素）在可见区域）

当滚动了这150个像素时，暂停/停止应该变为“播放”，因此，如果每个幻灯片之间的暂停是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

它的工作非常精细，笔直且符合预期，还有一个奖励：我正在寻找的补偿！（yeeeh！）

非常容易实施

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

＆＃34;谢谢＆＃34;对自己： - ）

Answer 2

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

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

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

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 carousel暂停直到它进入视口？

3 个答案: