我在Rails应用程序中使用垂直时间轴来进行红宝石。除chrome浏览器外,效果很好。动画不适用于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');
});
}
});
谢谢。
最佳答案
它的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/
让我知道您的反馈!
谢谢
关于javascript - 垂直时间轴在Chrome浏览器中不起作用,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/41606865/