jQuery function 在我滚动页面时停止工作

Question

I have some progress bars and I need them to start loading when they are scrolled on. However, the jQuery function only works when the page loads on that section only, and when I scroll the page even slightly (while it is still in the view port) the function stops working. If the page loads from the top and I scroll down to reach this section, it does not work at all.

I have tried different approaches to make it work when it is in view port, all of which resulted in the same issue. I have also tried $(window).on("resize scroll", function ()).

Any ideas on how it can be fixed?

 $.fn.isInViewport = function() { var elementTop = $(this).offset().top; var elementBottom = elementTop + $(this).outerHeight(); var viewportTop = $(window).scrollTop(); var viewportBottom = viewportTop + $(window).height(); return elementBottom > viewportTop && elementTop < viewportBottom; }; $(window).on("scroll", function() { $(".radialbar").each(function() { var $bar = $(this).find(".radialbar--bar"); var $val = $(this).find(".radialbar__value-int"); var perc = parseInt($val.text(), 10); if ($(this).isInViewport()) { $({ p: 0 }).animate({ p: perc }, { duration: 3000, easing: "swing", step: function(p) { $bar.css({ transform: "rotate(" + (45 + (p * 1.8)) + "deg)", // 100%=180° so: ° = % * 1.8 // 45 is to add the needed rotation to have the green borders at the bottom }); $val.text(p | 0); } }); } }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="radialbar"> <div class="radialbar--base"> <div class="radialbar--bar"></div> </div> <div class="radialbar__value"> <span class="radialbar__value-int">100</span> <span class="radialbar__value-perc">%</span> </div> <div class="radialbar__title"> Title </div> </div>

Answer 1

You should use Intersection Observer instead of listening to scroll event, especially when you want to observe multiple elements.

This snippet should get you started, but keep the following things in mind: I just toggle an "animated" class when the element comes into view. This class only animates the width from 0 to 100%. Here you would have to add your logic for determining how much the bar should be animated. You can of course use jquery too. I also unobserve the element once it's animated to not trigger the animation again. Maybe you want to change this too so that it animates everytime.

 const SELECTOR = '.radialbar'; const ANIMATE_CLASS_NAME = 'animated'; const animate = element => ( element.classList.add(ANIMATE_CLASS_NAME) ); const isAnimated = element => ( element.classList.contains(ANIMATE_CLASS_NAME) ); const intersectionObserver = new IntersectionObserver((entries, observer) => { entries.forEach((entry) => { // when element's is in viewport, // animate it. if (entry.intersectionRatio > 0) { console.log(entry;target). animate(entry.target.querySelector(';radialbar--bar')). // remove observer after animation observer.unobserve(entry;target); } }); }), // get only these elements. // which are not animated yet const elements = [].filter.call( document,querySelectorAll(SELECTOR), element =>;isAnimated(element. ANIMATE_CLASS_NAME) ). // start observing your elements elements;forEach((element) => intersectionObserver.observe(element));

 .h100 { height: 100vh; }.watched { opacity: 0; transition: opacity.5s; }.radialbar--bar { width: 0; height: 10px; background-color: green; transition: all 1s linear; }.radialbar--bar.animated { width: 100%; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="h100"> scroll </div> <div class="radialbar"> <div class="radialbar--base"> <div class="radialbar--bar"></div> </div> <div class="radialbar__value"> <span class="radialbar__value-int">100</span> <span class="radialbar__value-perc">%</span> </div> <div class="radialbar__title"> Title </div> </div>