javascript - 超出视口(viewport)时停止 slider 滚动？

Question

示例页面:http://550.9f2.myftpupload.com/speaking-engagements/

使用 Wordpress(Visual Composer)构建。

在页面中间附近，您会看到一个带引号的黄色 slider ，它会在每张幻灯片之间自动滚动。因为每张幻灯片的大小会根据文本的数量而变化，所以我需要在用户滚动经过它时自动停止滑动。否则，当 slider 浏览不同的幻灯片时，下面的内容会上下跳动。

我的在线研究告诉我这应该用 Javascript/jQuery 来完成？我一点都不熟悉，有没有人对新手如何实现这个有任何提示？

Answer 1

有两件事你应该注意:

1) 检测 slider 是否对用户可见。有几种解决方案，例如 this或 this

2) 根据 slider 可见性停止/启动 slider 。 将它们组合在一起，代码将如下所示。它是概念性的，未经测试，但我认为这个想法很清楚。

jQuery(window).scroll(function($) {

    function isScrolledIntoView(elem)
    {
        var docViewTop = $(window).scrollTop();
        var docViewBottom = docViewTop + $(window).height();

        var elemTop = $(elem).offset().top;
        var elemBottom = elemTop + $(elem).height();

        return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
    }


    if (isScrolledIntoView($('.rd_testimonials'))){
        $('.rd_testimonials').carouFredSel({auto: false});
    } else {
        $('.rd_testimonials').carouFredSel({auto: true});
    }

});