I want to start JS function when I scroll

Question

I have a one-page website with a section for a progress bar. I have a function for animation and all that, and I know how to start it when the page loads. But I don't know how to start it when I scroll to that section.

JS code :

window.onload = function() {
    move();
};

var i = 0;
function move() {
    if (i == 0) {
        i = 1;
        var elem = document.getElementById("myBar");
        var width = 1;
        var id = setInterval(frame, 10);
        function frame() {
            if (width >= 95) {
                clearInterval(id);
                i = 0;
            } else {
                width++;
                elem.style.width = width + "%";
            }
        }
    }
}

I'm not sure I understand your question, but did you mean to run a given code when a given element appears in the viewport? In that case you might consider the HTML Intersection Observer API described in this answer https://stackoverflow.com/questions/1462138/event-listener-for-when-element-becomes-visible — Diego D, Apr 16 '22 at 11:53

score 1 · Answer 1 · answered Apr 16 '22 at 11:53

1

If you want to trigger on scroll, you could do that through jquery.

$(element).scroll(() ={
    function ()
}

But if you want to animate on scroll, I'd advise you to use a library called Gsap. Look in the scrollTrogger document.

answered Apr 16 '22 at 11:53

crayonne

135
11

2

absolutely zero need for jQuery for this. It's a fair enough suggestion if the OP were already using jQuery, but since there's no indication of this, your code snippet is just going to confuse things. – Robin Zigmond Apr 16 '22 at 12:08
Yes, you're right! – crayonne Apr 16 '22 at 12:40

score 1 · Answer 2 · answered Apr 16 '22 at 11:56

1

Simply use the scroll event on the whole document:

document.addEventListener('scroll', function(e) {
  move();
});

var i = 0;

function move() {
  if (i == 0) {
    i = 1;
    var elem = document.getElementById("myBar");
    var width = 1;
    var id = setInterval(frame, 10);

    function frame() {
      if (width >= 95) {
        clearInterval(id);
        i = 0;
      } else {
        width++;
        elem.style.width = width + "%";
      }
    }
  }
}

<div style="height:1000px;width:100%;">

<div style="height:200px">padding</div>
  <div id="myBar" style="background:green;">my bar</div>

</div>

answered Apr 16 '22 at 11:56

Lee Taylor

7,761
16
33
49

When I add that then everytime I scroll animation starts. But I want just when I scroll to selected section. – Wikson Apr 16 '22 at 12:27
Your question lacks the details to accurately answer. Which selected section? – Lee Taylor Apr 16 '22 at 12:36
I will try to explain better. I have portfolio website onepage. I have section for my expericance, so when I scroll there I want to see animation with my progress bars. With your soltion everytime I scroll i see animation. Img : https://imgur.com/a/RBA9eDa . – Wikson Apr 16 '22 at 12:40
@Wikson Please edit your question and place that information there. If your question is vague, then answers will also be vague. I was assuming that you'd be able to take what I had and run with it. – Lee Taylor Apr 16 '22 at 12:42
@Wikson Further, please add the relevant html/css to your question. – Lee Taylor Apr 16 '22 at 12:44

I want to start JS function when I scroll

2 Answers2