javascript - 垂直时间轴在 chrome 浏览器中不起作用

Question

我对 ruby​​ on rails 应用程序使用垂直时间轴。除了 chrome 浏览器，这很好用。动画不适用于谷歌浏览器。我认为这是来自脚本!!!!任何人都可以建议解决方案。我的脚本是，

<script>
jQuery(document).ready(function($){
    var timelineBlocks = $('.cd-timeline-block'),
        offset = 0.8;

    //hide timeline blocks which are outside the viewport
    hideBlocks(timelineBlocks, offset);

    document.getElementById("body").onscroll = function() {myFunction()};

    //on scolling, show/animate timeline blocks when enter the viewport
    function myFunction() {
        (!window.requestAnimationFrame) 
            ? setTimeout(function(){ showBlocks(timelineBlocks, offset); }, 100)
            : window.requestAnimationFrame(function(){ showBlocks(timelineBlocks, offset); });
    }

    function hideBlocks(blocks, offset) {
        blocks.each(function(){
            ( $(this).offset().top > $(window).scrollTop()+$(window).height()*offset ) && $(this).find('.cd-timeline-img, .cd-timeline-content').addClass('is-hidden');
        });
    }

    function showBlocks(blocks, offset) {
        blocks.each(function(){
            ( $(this).offset().top <= $(window).scrollTop()+$(window).height()*offset && $(this).find('.cd-timeline-img').hasClass('is-hidden') ) && $(this).find('.cd-timeline-img, .cd-timeline-content').removeClass('is-hidden').addClass('bounce-in');
        });
    }
});

谢谢。

Answer 1

它的 document.getElementById("body").onscroll = function() {myFunction()}; 在 chrome 上不能正常工作。

将此脚本用于 onScroll 事件:

$(window).on('scroll', function(){
    (!window.requestAnimationFrame) 
        ? setTimeout(function(){ showBlocks(timelineBlocks, offset); }, 100)
        : window.requestAnimationFrame(function(){ showBlocks(timelineBlocks, offset); });
});

引用:https://codyhouse.co/gem/vertical-timeline/

让我知道您的反馈!谢谢