Question

我打算使用名为charts.js的jQuery插件用于图形和图表。但是，在较大的页面上，即使在用户看到之前，这些图表的动画也会完成。

我的问题是，只有当它在视口内可见时才会淡入特定div / section的内容，如chart.js网站上所描述的那样。当我们向下滚动时，内容按顺序逐渐消失，因此甚至不会错过图表的动画。如何在jQuery的帮助下实现这一目标？

Answer 1

看看this jsFiddle。当作者变得可见时，作者会在框中淡出。您可能需要调用chart.js来创建图形，因为它们变得可见，而不是将它们淡入（即如果您想要花哨的图形动画，而不仅仅是淡入淡出:-)）我已经调整了小提琴并包括在下面：

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

Answer 2

Mika的Viewport Selectors插件适用于浏览器窗口视口，而不适用于html元素。换句话说，如果你有一些像#container {width：350px; height：150px; overflow：auto;}这样的css，滚动时它将不起作用。

我建议尝试他的其他插件Lazy Load

以下是一个示例：http://jsbin.com/efazos/1/edit

Answer 3

以下代码将使您能够确定元素是否在文档滚动窗口内。从那里你可以启用你的图表并做你喜欢的任何动画：

<script type="text/javascript">
$(document).ready(function() {
    $(document).on('scroll', function() {
        //Get Div 1's Top and Left offsets from the Document.
        var divTop = $('#div1').offset().top;
        var divLeft = $('#div1').offset().left;
        //Get the current window height and width.
        var winHeight = $(window).height();
        var winWidth = $(window).width();

        if (divPos <= winHeight && divLeft <= winWidth) {
            //Div is visible in window

            //Fade in Chart
        }
    });
});
</script>

如何仅在视口中显示数据

3 个答案: