Limitar distância do addEventListener 'scroll'

Fala ai André, tudo bem? Você precisa pegar esse código e adicionar um listener de scroll para ele.

Se você deixar solto assim, o mesmo será executado apenas quando a página carregar a não irá ouvir as futuras rolagens da página.

Espero ter ajudado.

Então chefe esse é o esquema. Eu coloquei o listener mas eu to querendo delimitar uma área entre 1 elemento e outro e só nessa área o listener ativar

Fala André, então, como eu disse, você precisa pegar o seu código acima e adicionar dentro de um listener de scroll, algo assim:

Seu código:

const elemento1 = document.querySelector('.elemento-1');
const elemento2 = document.querySelector('.elemento-2');

if(document.documentElement.scrollTop > elemento1.scrollHeight){
    window.addEventListener('scroll', minhaFuncaoAqui)
}
if(document.documentElement.scrollTop >  element2.scrollHeight){
    window.removeEventListener('scroll', minhaFuncaoAqui)
}

Dentro do listener:

window.addEventListener('scroll', () => {
    const elemento1 = document.querySelector('.elemento-1');
    const elemento2 = document.querySelector('.elemento-2');

    if(document.documentElement.scrollTop > elemento1.scrollHeight){
        window.addEventListener('scroll', minhaFuncaoAqui)
    }
    if(document.documentElement.scrollTop >  element2.scrollHeight){
        window.removeEventListener('scroll', minhaFuncaoAqui)
    }
})

Ai onde você usa scrollHeight poderia ser offsetTop para você pegar a distância dele em relação ao topo.

E para saber o quanto a página já rolou poderia usar window.scrollY.

Espero ter ajudado.

Opa chefe beleza? Eu fiz exatamente isso e deu certo muito obrigado! Mas antes de marcar como solução você consegue me dizer se este evento atrapalha na performace do site?

Pq ele fica ativando a cada scroll na tela né, isso não dispararia muitas vezes a função desnecessariamente? (Eu uso o debouce em alguns pontos do código já, mas nesse caso não vejo solução com ele :/ )

Abraços

Fala André, fico feliz que tenha dado certo \o

Sobre a performance, atrapalha MUITO, o ideal seria você aplicar um debounce (como você mesmo disse) nas funções de callback do scroll, assim, diminuimos a quantidade de vezes que elas são chamadas.

Espero ter ajudado.