Message from JavaScript discussions

October 2020

— Drop dont ask


After a fair amount of sweating and cutting together pieces from around the web, I came to this piece of code:

What it does is take all html elements in the page with a data-value attribute (e.g. <div data-value="50">), check if they're appearing on screen (using the scroll event listener), and run an animation counter inside them from 0 to the number of the data-value attribute.
It's all working, up to this point.

Problem is I need to remove the event for each specific html element after that element has come into view, but all I've tried didn't work.

— (If I don't remove the listener, every single small scroll makes the counters start again.)

— Https://

— You put too many scroll handlers on window.. which access computed style on every scroll..

— Do you mean the foreach causes too many of them?

— Ye, one is enough

— It will iterate elements array and if element is not null and visible will start the animation and set array item to null, when only nulls left it will remove the listener

Message permanent page

— More lightweight

— The visibility recognition is also not good

— How should I change it so it still checks for the following elements after the first?

— Oh my.. jquery🤤 cmon