クロムブラウザでは垂直タイムラインが機能しません

Question

私は、レール上のルビーアプリケーションに垂直のタイムラインを使用します。それはクロムブラウザを除いてうまくいく。アニメはGoogle 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()};は、クロムで正しく機能しません。

使用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/

私はあなたのフィードバックを知ってみましょう！ ありがとう