Как запустить код только когда доскроллил до него (js без библиотек)

Есть анимация которая должна запускаться только когда доскроллил до нее, искал в интернете как сделать, так и не разобрался:( Нужно на чистом JS

function playNumber(one, two, three, four, five, six, seven, eight, nine, ten, selector ) {
        
        const number = document.querySelector(selector);
        let current = 0;
            setInterval(() => {
                if(current <= six) {
                    number.innerHTML = current++;
                }
            }, one);
            setInterval(() => {
                if(current <= seven) {
                    number.innerHTML = current++;
                }
            }, two);
            setInterval(() => {
                if(current <= eight) {
                    number.innerHTML = current++;
                }
            }, three);
            setInterval(() => {
                if(current <= nine) {
                    number.innerHTML = current++;
                }
            }, four);
            setInterval(() => {
                if(current <= ten) {
                    number.innerHTML = current++;
                }
            }, five);  
    }
    
     playNumber(5, 40,200,500,2000,120,140,147,149,150, '.numberOne');
        playNumber(0, 20,100,300,2000,900,980,990,999,1000, '.numberTwo');
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

<div class="service__info__inner__right__one">
                        <p class="service__info__inner__right__number"><span class="numberOne"></span>%</p>
                        <p class="service__info__inner__right__text">увеличение прибылей при грамотном использовании соцсетей</p>
                    </div>
                    <div class="service__info__inner__right__two">
                        <p class="service__info__inner__right__number"><span class="numberTwo"></span>+</p>
                        <p class="service__info__inner__right__text">новых клиентов приходят через соцсети каждый месяц</p>
                    </div>


Ответы (1 шт):

Автор решения: Tina Gordienko_Drog

нужно всего-лишь смотреть, доскролили ли мы до конца страницы

function playNumber(one, two, three, four, five, six, seven, eight, nine, ten, selector ) {
        
        const number = document.querySelector(selector);
        let current = 0;
            setInterval(() => {
                if(current <= six) {
                    number.innerHTML = current++;
                }
            }, one);
            setInterval(() => {
                if(current <= seven) {
                    number.innerHTML = current++;
                }
            }, two);
            setInterval(() => {
                if(current <= eight) {
                    number.innerHTML = current++;
                }
            }, three);
            setInterval(() => {
                if(current <= nine) {
                    number.innerHTML = current++;
                }
            }, four);
            setInterval(() => {
                if(current <= ten) {
                    number.innerHTML = current++;
                }
            }, five);  
    }
        
let isPlayed = false;
document.getElementById('test').addEventListener('scroll', (e) => {
  const {scrollHeight, clientHeight, scrollTop} = e.target;
  if (!isPlayed && scrollHeight - (clientHeight + scrollTop) < 100) {
    playNumber(5, 40,200,500,2000,120,140,147,149,150, '.numberOne');
    playNumber(0, 20,100,300,2000,900,980,990,999,1000, '.numberTwo');
    isPlayed = true;
  }
});
.test-container {
        width: 100vw;
        height: 100vh;
        overflow: scroll;
    }
<div  id="test" class="test-container">

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

<div class="service__info__inner__right__one">
                        <p class="service__info__inner__right__number"><span class="numberOne"></span>%</p>
                        <p class="service__info__inner__right__text">увеличение прибылей при грамотном использовании соцсетей</p>
                    </div>
                    <div class="service__info__inner__right__two">
                        <p class="service__info__inner__right__number"><span class="numberTwo"></span>+</p>
                        <p class="service__info__inner__right__text">новых клиентов приходят через соцсети каждый месяц</p>
                    </div>
</div>

→ Ссылка