0

No código abaixo, o alerta é acionado quando o scroll chega no final.

$('#messages').scroll(function() {
    if ($(this).scrollTop() + $(this).height() == $(this).get(0).scrollHeight) {
        alert('a rolagem chegou ao fim, fazer algo aqui.');
    }
});

Porém, no carregamento da página, o scroll é iniciado no bottom.

Como posso fazer ao inverso do código acima, e alertar quando o scroll chegar ao topo?

2 Respostas 2

4

É só colocar um else if verificando se a rolagem chegou a 0:

Coloquei um Math.ceil() no exemplo apenas para funcionar corretamente no snippet.

$('#messages').scroll(function() {
    if (Math.ceil($(this).scrollTop() + $(this).height()) == $(this).get(0).scrollHeight) {
        console.log('a rolagem chegou ao fim, fazer algo aqui.');
    }else if($(this).scrollTop() == 0){
        console.log('a rolagem chegou ao início, fazer algo aqui.');
    }
});
html, body{
   overflow: hidden;
   height: 100vh;
}

#messages{
   height: 50%;
   overflow: auto;
   background: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="messages">
   mensagens início
   <br><br><br><br><br><br><br><br><br><br><br><br>
   mensagens fim<br>
</div>

1

Tente assim:

$('#messages').scroll(function() {
    if ($(this).scrollTop() == 0) {
        alert('a rolagem chegou ao inicio, fazer algo aqui.');
    }
});

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .