javascript - 如何仅在视口(viewport)中显示数据

Question

我打算使用一个名为 charts.js 的 jQuery 插件用于图形和图表。但是，在较大的页面上，这些图形的动画甚至在用户看到它们之前就已经完成了。

我的问题是，只有当特定 div/部分的内容在视口(viewport)内可见时，我们如何淡入，正如 charts.js 网站上所描述的那样。当我们向下滚动时，内容会依次淡入，因此甚至不会错过图表的动画。如何借助 jQuery 实现这一目标？

Answer 1

看看this jsFiddle。当盒子变得可见时，作者会在盒子中淡出。您可能需要调用 chart.js 来创建图表，因为它们变得可见，而不仅仅是淡入(也就是说，如果您想要花哨的图表动画，而不仅仅是淡入:-))我已经调整了 fiddle 并将其包含在下面:

$(document).ready(function() {    
    /* Every time the window is scrolled ... */
    $(window).scroll( function(){    
        /* Check the location of each desired element */
        $('.graph').each( function(i){            
            var bottom_of_object = $(this).position().top + $(this).outerHeight();
            var bottom_of_window = $(window).scrollTop() + $(window).height();

            /* If the object is completely visible in the window, fade it it */
            if( bottom_of_window > bottom_of_object ){

                //Code to initialize the graph here.
                //This initialization should probably
                //be deferred, to ensure performance,
                //and the graphs should be marked as
                //initialized so we dont't init them
                //multiple times (possibly by changing
                //their class so .each ignores them).
            }            
        });     
    });    
});