Question

这件事让我头疼，因为我找不到解决办法。我下载了一个脚本，该脚本可以帮助我制作带有动画的图表（jquery.lineProgressbar.js）。

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

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

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

我尝试在 jquery.lineProgressbar.js 的“ Progressing” 部分之前添加代码，以告诉“应用动画，一旦div名为” progressbar”进入视口：

$.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中的代码重新初始化它们。

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

1 个答案: