如何仅在视口中显示数据 [英] How to show data only when in viewport

问题描述

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

I'm planning to use a jQuery plugin called charts.js for graphs and charts. However, on a larger page, the animations of those graphs get completed even before the user sees them.

我的问题是，只有当特定div/section的视口在Charts.js网站上准确显示的视口内可见时，我们才如何淡入该div/section的内容.当我们向下滚动时，内容将逐渐淡入，因此甚至不会丢失图形的动画.如何在jQuery的帮助下实现这一目标?

My question is, how do we fade in the content of a particular div/section only when it is visible inside the viewport as exactly depicted on charts.js website. The content fades in sequentially as we scroll down and hence even the animations of the graphs aren't missed. How can I achieve this with the help of jQuery?

推荐答案

看看此 jsFiddle.作者在出现时会淡入淡出框.您可能需要调用chart.js来创建可见的图形，而不是淡入淡出(也就是说，如果您想要精美的图形动画，而不仅仅是淡入淡出:-)，我已经对小提琴进行了调整并将其包含在下面:

Take a look at this jsFiddle. The author fades in boxes as they become visible. You porbably need to call chart.js to create the graphs as they become visible, rather than just fade them in (that is if you want the fancy graph animations, rather than just a fade-in :-)) I have tweaked the fiddle and included it below:

$(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).
            }            
        });     
    });    
});

这篇关于如何仅在视口中显示数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！