如何执行图表脚本直到每个图表都在视口中？

Question

这件事让我很头疼，因为我找不到解决方法。我下载了一个脚本，它帮助我制作带有动画的图表 (jquery.lineProgressbar.js)。

图表工作得很好，但问题是动画在页面加载时运行。我希望人们能够看到每个图表的动画。我在同一个页面中有很多图表，我需要它们都在进入视口时执行动画。

我知道这个问题已经发布了很多次，但是 none 解决了我的问题。

我决定为我的代码制作一个 Plunker 示例，以便您可以更好地了解它的工作原理。 Here is my Plunker

我尝试在 jquery.lineProgressbar.js 中的 "Progressing" 部分之前添加代码，告诉 "apply the animation once the div called "进度条”进入视口：

$.fn.isOnScreen = function() {
    var win = $(window);
    var viewport = {
      top: win.scrollTop(),
      left: win.scrollLeft()
    };
    viewport.right = viewport.left + win.width();
    viewport.bottom = viewport.top + win.height();

    var bounds = this.offset();
    bounds.right = bounds.left + this.outerWidth();
    bounds.bottom = bounds.top + this.outerHeight();

    return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom));
};

if($('.progressbar').isOnScreen()) {
   // Progressing
   progressFill.animate(
     etc...
   )
}

...但这不起作用。
我希望有人能帮助我，在此先感谢！

代码更新：
我根据 troyw1636 答案添加了功能代码。 Here the new plunker

function TestViewPort(elementID, chartPercentage){
var top_of_element = $("#" + elementID).offset().top;
var bottom_of_element = $("#" + elementID).offset().top + $("#element").outerHeight();
var bottom_of_screen = $(window).scrollTop() + $(window).innerHeight();
var top_of_screen = $(window).scrollTop();

  if ((bottom_of_screen > top_of_element) && (top_of_screen < bottom_of_element)){
    if (!$("#" + elementID).hasClass('on-view')) {
      $("#" + elementID).LineProgressbar({percentage:chartPercentage}).addClass('on-view');
    }
  } 
}

Answer 1

你走在正确的轨道上。我使用了一种不同的方法来确定视口可见性，并将进度条调用包含在其中。我还在 $(window).scroll() 事件中添加了相同的调用，以便在视口更改时重新计算所有 div 的视口可见性。

我已经编辑了你的 Plunker： https://plnkr.co/edit/k5aop0cnP9uziTZwDY3Y?p=preview

function TestViewPort(elementID, chartPercentage) {
    var top_of_element = $("#" + elementID).offset().top;
    var bottom_of_element = $("#" + elementID).offset().top + $("#element").outerHeight();
    var bottom_of_screen = $(window).scrollTop() + $(window).innerHeight();
    var top_of_screen = $(window).scrollTop();

    if ((bottom_of_screen > top_of_element) && (top_of_screen < bottom_of_element)) {
        //div is visible so set up chart
        $("#" + elementID).LineProgressbar({
            percentage: chartPercentage
        });
    } else {
        // div not visible
    }
}

作为下一步，您可能想要确定哪些图表已经被初始化并阻止 TestViewPort 中的代码在滚动事件后重新初始化它们。

如何执行图表脚本直到每个图表都在视口中？

How to Execute a chart Script until each chart is in viewport?

javascript

jquery

animation

viewport