退出視口時是否停止滑塊滾動？

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

});