Question

这是问题的JSFiddle。

当用户滚动到图表并且在窗口中可见时，图表会显示动画。但是，当用户向上滚动然后再向下滚动时，图表会重新出现并且大小翻倍。

我希望图表保持固定状态，一旦用户第一次滚动到它就会出现。

以下是代码：

var data = [{
    value: 30,
    color: "#F38630"
}, {
    value: 50,
    color: "#E0E4CC"
}, {
    value: 100,
    color: "#69D2E7"
}];

var inView = false;

function isScrolledIntoView(elem)
{
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemTop <= docViewBottom) && (elemBottom >= docViewTop));
}

$(window).scroll(function() {
    if (isScrolledIntoView('#canvas')) {
        if (inView) { return; }
        inView = true;
        new Chart(document.getElementById("canvas").getContext("2d")).Pie(data);
    } else {
        inView = false;  
    }
});

Answer 1

除了尺寸加倍（我无法重现）之外，每次将图形滚动到视图外时，您都会重置inView变量。当它再次回到视野中时，您正在创建一个新图形。每次都会发生这种情况。

解决方案是，一旦图表呈现一次，就不会将inView设置回false：

var graphRendered = false;
...
$(window).scroll(function() {
  if (! graphRendered && isScrolledIntoView('#canvas')) {
    graphRendered = true;
    new Chart(document.getElementById("canvas").getContext("2d")).Pie(data);
  }
});

（将inView重命名为graphRendered以更好地适应其所用的内容）

fiddle

每次用户滚动时，Chart.js的大小都会翻倍

1 个答案: