退出视口时是否停止滑块滚动？

Question

样本页面：http: //550.9f2.myftpupload.com/speaking-engagements/

使用Wordpress（Visual Composer）构建。

在页面中间附近，您会看到一个带有引号的黄色滑块，该滑块会在每张幻灯片之间自动滚动。 由于每张幻灯片的大小都会随文本量的变化而变化，因此我需要在用户滚动经过后自动停止滑动。 否则，下面的内容会随着滑块浏览不同的幻灯片而上下跳动。

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

Answer 1

您应该注意两件事：

1）检测是否有滑动条对用户可见。 有几种解决方案，例如this或this

2）根据滑块的可见性停止/启动滑块。 将所有内容组合在一起，代码将如下所示。 我认为这是概念性的，未经测试，但想法很明确。

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});
    }

});