当div元素出现在视口中时触发动画

Question

我正在使用此答案中的滚动触发器来构建一个progressbar.js动画，一旦整个进度条div在视口中，就会触发该动画。

动画正常运行而没有触发器，仅在页面加载时运行。 但是，当元素滚动到完整视图时，我无法触发它。

下面的示例代码在顶部具有div间隙，因此您可以在动画开始之前向下滚动，尽管显然这是我无法使用的部分。

 function privacyScoreCircle() { // progressbar.js circle var bar = new ProgressBar.Circle(document.getElementById('privacy-score-circle'), { color: '#aaa', // This has to be the same size as the maximum width to // prevent clipping strokeWidth: 4, trailWidth: 4, easing: 'easeInOut', duration: 1400, text: { autoStyleContainer: false }, from: { color: '#dddddd', width: 4 }, to: { color: '#aaaaaa', width: 4 }, // Set default step function for all animate calls step: function(state, circle) { circle.path.setAttribute('stroke', state.color); circle.path.setAttribute('stroke-width', state.width); var value = Math.round(circle.value() * 100); if (value === 0) { circle.setText(''); } else { circle.setText(value + '%'); } } }); bar.text.style.fontFamily = '"Montserrat", sans-serif'; bar.text.style.fontSize = '1.7rem'; bar.trail.setAttribute('stroke-linecap', 'round'); bar.path.setAttribute('stroke-linecap', 'round'); //bar.animate(0.97); // <-- ANIMATION CAN BE TRIGGERED INSTANTLY USING THIS } privacyScoreCircle(); // Check if element is scrolled into view function isScrolledIntoView(elem) { var docViewTop = $(window).scrollTop(); var docViewBottom = docViewTop + $(window).height(); var elemTop = $(elem).offset().top; var elemBottom = elemTop + $(elem).height(); return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop)); } function Utils() { } Utils.prototype = { constructor: Utils, isElementInView: function(element, fullyInView) { var pageTop = $(window).scrollTop(); var pageBottom = pageTop + $(window).height(); var elementTop = $(element).offset().top; var elementBottom = elementTop + $(element).height(); if (fullyInView === true) { return ((pageTop < elementTop) && (pageBottom > elementBottom)); } else { return ((elementTop <= pageBottom) && (elementBottom >= pageTop)); } } }; var Utils = new Utils(); var isElementInView = Utils.isElementInView($('#privacy-score-circle'), false); if (isElementInView) { bar.animate(0.97); } 

 #gap { height: 500px; } #privacy-score-circle { margin: auto; width: 200px; height: 200px; position: relative; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/progressbar.js/1.0.1/progressbar.min.js"></script> <div id="gap">Scroll down to activate animation</div> <div id="privacy-score-circle"></div> 

Answer 1

您应该在代码中应用以下更改：

1. 您在privacyScoreCircle()函数中声明了bar变量。 在函数内部定义的变量不能从函数外部访问。 因此，将其定义为全局变量。
2. 滚动窗口时应执行动画。

您可以在此处查看正确运行的代码。