javascript - 在 if 语句中执行动画功能

Question

我有一个在页面加载时加载动画的圆环图。我试图让动画在用户滚动到 div 时运行。我的 javascript 文件开头有这个代码块

$(window).scroll(function() {

    var hT = $('#token-stats').offset().top,
        hH = $('#token-stats').outerHeight(),
        wH = $(window).height(),
        wS = $(this).scrollTop();
    console.log((hT - wH), wS);
    if (wS > (hT + hH - wH)) {
        alert('pie!');
        drawDoughnutChart();
        $(window).off('scroll')
    }
});

我在 if 语句中调用了函数，但它似乎不起作用。这是我正在使用的确切代码的 fiddle https://jsfiddle.net/cmLkbq6e/

警报工作正常，我做错了什么？

Answer 1

首先您需要存储doughnutChart 相对于页面顶部的距离(以便您知道何时显示图表)

然后创建一个事件监听器，它将在用户滚动时运行。

最后，创建一个 if 语句检查当前窗口距离是否大于或等于 doughnutChart 距离，然后运行您的动画!

const doughnutChart = document.querySelector('.chart').offsetTop;

function checkScroll () {
    if (window.scrollY >= doughnutChart) {
      $("#doughnutChart").drawDoughnutChart([
        { title: "test",         value : 43,  color: "#e65c53" },
        { title: "test", value:  29,   color: "#26a3b1" },
        { title: "test",      value:  21,   color: "#19818d" },
        { title: "test",        value : 3.5,   color: "#396b7e" },
        { title: "test",        value : 3.5,   color: "#a5a5a5" }
      ]);

      // remove listener so scroll doesn't create many charts
      removeEventListener('scroll', checkScroll);
    }
}

window.addEventListener('scroll', checkScroll);