Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
5
respostas

Evento DOM 'mousewheel', tem como detectar se o scroll está subindo ou descendo?

por Nelson D'Vasconcelos
| 14.4k xp | 40 posts

Oi pessoal, Estou desenvolvendo um "quadro interativo", usando meus escassos conhecimentos de front-end, e gostaria de implementar na function 'rolar()' um 'if statement' no qual identificasse se o scroll estivesse rolando para cima imprimisse: '↑↑↑', ou para baixo: '↓↓↓'.

até agora meu código está assim:

<!DOCTYPE html>

<html lang="pt-BR">

<head>

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Interative Square</title>

    <style>

        body{

            background-color :blueviolet;
            color:chartreuse;
            font: normal 25pt arial;
        }

        div#area {

            background: darkmagenta;
            width: 200px;
            height: 200px;
            line-height: 200px;
            text-align: center;
        }

    </style>

</head>

<body>

    <div id = 'area' onmousewheel = "rolar()">
    <!-- ***dentro da tag div*** onclick = "clicar()" onmouseenter = "entrar()" onmouseout = "sair()"-->
        Interaja...

    </div>

</body>

<script>

    var interacaoArea = window.document.getElementById('area');

    interacaoArea.addEventListener('click', clicar);
    interacaoArea.addEventListener('mouseenter', entrar);
    interacaoArea.addEventListener('mouseout', sair);

    function clicar() {
        interacaoArea.innerText = "Clicou!"
        interacaoArea.style.background = 'indigo';
    }

    function entrar() {
        interacaoArea.innerText = "Entrou!";
        interacaoArea.style.background = 'darkmagenta';
    }

    function sair(){
        interacaoArea.innerText = "Saiu!";
        interacaoArea.style.background = 'darkmagenta';
    }

    function rolar(){
        interacaoArea.innerText = "Rolou!";
        interacaoArea.style.background = 'darkmagenta';
    }

</script>

</html>

Enfim, quem souber e poder me dar esta força, agradeço demais!!!

5 respostas
por Giovanna Moeller
| 624.1k xp | 892 posts
Instrutor iOS Software Engineer

Oi Nelson, tudo certo?

Acontece que a sua página possui o tamanho da tela inteira, então não tem como fazer o scroll. Podemos colocar que a altura da nossa página total é de 200vh, algo assim:

body {
    background-color :blueviolet;
    color:chartreuse;
    font: normal 25pt arial;
    height: 200vh;
}

Agora nossa página tem 2x a sua altura total, e conseguimos realizar o scroll.

Temos um evento chamado scroll, que verifica se o usuário está realizando o scroll. Vamos usar esse evento em vez do "onmousewheel" que você tinha utilizado, beleza?

document.addEventListener('scroll', rolar);

Chamamos a função rolar quando esse evento (scroll) for acionado. Agora vamos para a lógica. O nosso objeto window possui uma propriedade chamada scrollY que pega o valor do scroll no momento. Portanto, logo no topo, esse valor é 0, já que não há scroll. Conforme formos descendo, esse scroll aumenta, e conforme formos subindo, esse valor diminui, até chegar em 0 novamente.

Tendo isso em mente, eu elaborei uma lógica dessa maneira:

var ultimaPosicao = 0;

function rolar() {
        var atualPosicao = window.scrollY;

        if(atualPosicao > ultimaPosicao) {
            console.log('↓↓↓')
        } else {
            console.log('↑↑↑');
        }

        ultimaPosicao = atualPosicao;
    }

Portanto, declaramos uma variável chamada atualPosicao que recebe esse valor scrollY, e comparamos essa variável com a ultimaPosicao registrada. Por fim, setamos o valor da ultimaPosicao sendo igual a atualPosicao.

Espero que tenha compreendido, qualquer outra dúvida me retorne! Abraços e bons estudos =)

por Nelson D'Vasconcelos
| 14.4k xp | 40 posts

Giovanna, Que fantástico! Muuuito obrigado mesmo pela explicação!!!

Mas algo aconteceu que ao "scrollar" o 'quadro interativo', a 'div' area, ele fica só subindo e descendo ao invés de imprimir as 'setinhas indicativas'...

Tentei ver o que seria... penso que seja o height: 200vh; Contudo, ao suprimí-lo, momentaneamente como comentário, ele realmente parou de subir e descer mas tão pouco imprime as setinhas...

modifiquei os console.log('↓↓↓') para interacaoArea.innerText = '↓↓↓'; porém, ainda assim não funcionou.

Por fim, tentei criar uma condição que ao acionar a função 'entrar' acionasse a também a função 'rolar', mas ainda sem sucesso...

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Curso em Video - JS</title>

    <style>
        body{
            background-color :blueviolet;
            color:chartreuse;
            font: normal 25pt arial;
            /*height: 200vh;*/
        }
        div#area {
            background: darkmagenta;
            width: 200px;
            height: 200px;
            line-height: 200px;
            text-align: center;
        }
    </style>
</head>
<body>
        <div id = 'area'>
                <!-- ***dentro da tag div***
                onclick = "clicar()"
                onmouseenter = "entrar()"
                onmouseout = "sair()"
                onmousewheel = "rolar()"
            -->
            Interaja...
        </div>
</body>
<script>
    var interacaoArea = window.document.getElementById('area');
    var ultimaPosicao = 0;

    interacaoArea.addEventListener('click', clicar);
    interacaoArea.addEventListener('mouseenter', entrar);
    interacaoArea.addEventListener('mouseout', sair);
    interacaoArea.addEventListener('scroll', rolar);

    function clicar() {
        interacaoArea.innerText = "Clicou!"
        interacaoArea.style.background = 'indigo';
    }

    function entrar() {
        interacaoArea.innerText = "Entrou!";
        interacaoArea.style.background = 'darkmagenta';
    }

    function sair() {
        interacaoArea.innerText = "Saiu!";
        interacaoArea.style.background = 'darkmagenta';
    }

    function rolar(){
        var atualPosicao = window.scrollY;

        if (entrar) {
            if (atualPosicao > ultimaPosicao){
            interacaoArea.innerText = '↓↓↓';

            } else {
                interacaoArea.innerText = '↑↑↑';
            }
        }

        ultimaPosicao = atualPosicao;
        //interacaoArea.innerText = "Rolou!";
        interacaoArea.style.background = 'darkmagenta';
    }
</script>
</html>

Não esperei uma resposta deste nível, sério mesmo, foi cirurgica nos detalhes, muito profissional, aprendi muito com teus esclarecimentos, de coração!!!

Se ainda poder me ajudar com este projetinho, estarei eternamente grato!

solução!
por Giovanna Moeller
| 624.1k xp | 892 posts
Instrutor iOS Software Engineer

Oii Nelson! Eu tinha colocado a altura de 200vh no body para aparecer o scroll, mas agora percebi que você quer fazer o scroll no quadradinho menor, certo? E não na página inteira!

O problema continua o mesmo, pois como o tamanho da caixa é 200px de largura e de altura, não conseguimos visualizar nenhuma barra de scroll, por isso que o scroll não funciona!

Por esse motivo, eu acredito que não conseguimos implementar o scroll apenas na caixinha menor (de interação), e sim na página inteira, como foi proposto no código que eu te enviei!

Além disso, essa verificação de entrar não funcionará, eu não entendi muito o objetivo dela, mas acredito que você queria que quando o mouse entrasse na caixinha menor, fizesse a verificação do scroll? Se sim, não funcionaria exatamente dessa forma, pois para chamar uma função devemos usar os parênteses ( ) mas acontece que a função entrar() não retorna nada, então essa condicional abaixo, nunca iria funcionar!

if (entrar()) { // não retorna nada essa função
            if (atualPosicao > ultimaPosicao){
            interacaoArea.innerText = '↓↓↓';

            } else {
                interacaoArea.innerText = '↑↑↑';
            }
        }

Portanto, podemos tirar essa condição!

Então vamos as considerações finais: como a caixinha de interação é muito pequena, ela não possui o scroll! Portanto, o evento scroll nunca será ouvido! Só conseguimos adicionar esse scroll no corpo da página total, ou seja, no body! E para aparecer o scroll na vertical, precisamos que a altura da página seja maior do que o padrão, por isso que eu coloquei height: 200vh; no body, entende?

Veja o código abaixo como ficou! Rode ele na sua máquina e se ainda persistir alguma dúvida, por favor me mande mensagem novamente que irei te auxiliar!

Agora, quando você realizar o scroll na página total, a caixinha de interação irá mostrar as setinhas da forma correta.

<!DOCTYPE html>
<html lang="pt-BR">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Curso em Video - JS</title>

    <style>
        body {
            background-color: blueviolet;
            color: chartreuse;
            font: normal 25pt arial;
            height: 200vh; /* para aparecer o scroll e conseguirmos escutar o evento de scroll */
        }

        div#area {
            background: darkmagenta;
            width: 200px;
            height: 200px;
            line-height: 200px;
            text-align: center;
            overflow-y: scroll;
        }
    </style>
</head>

<body>
    <div id='area'>
        <!-- ***dentro da tag div***
                onclick = "clicar()"
                onmouseenter = "entrar()"
                onmouseout = "sair()"
                onmousewheel = "rolar()"
            -->
        Interaja...
    </div>
</body>
<script>
    var interacaoArea = window.document.getElementById('area');
    var ultimaPosicao = 0;

    interacaoArea.addEventListener('click', clicar);
    interacaoArea.addEventListener('mouseenter', entrar);
    interacaoArea.addEventListener('mouseout', sair);
    document.addEventListener('scroll', rolar); // Scroll da página inteira

    function clicar() {
        interacaoArea.innerText = "Clicou!"
        interacaoArea.style.background = 'indigo';
    }

    function entrar() {
        interacaoArea.innerText = "Entrou!";
        interacaoArea.style.background = 'darkmagenta';
    }

    function sair() {
        interacaoArea.innerText = "Saiu!";
        interacaoArea.style.background = 'darkmagenta';
    }

    function rolar() {
        var atualPosicao = window.scrollY;

        if (atualPosicao > ultimaPosicao) {
            interacaoArea.innerText = '↓↓↓';

        } else {
            interacaoArea.innerText = '↑↑↑';
        }

        ultimaPosicao = atualPosicao;
        interacaoArea.style.background = 'darkmagenta';
    }
</script>

</html>

Abraços! Fiquei muito feliz com o seu feedback!

por Nelson D'Vasconcelos
| 14.4k xp | 40 posts

Massa, Giovanna, Show!!!

Não era como eu tinha idealizado a princípio, mas já está de bom tamanho!!!

Sim! Vi tua tag 'alura Scuba Team' como não sabia do quê tratava-se fui fuçar teu perfil (de leve hehe...) e descobri que tu tem um canal de tecnologia no YouTube e passa um monte de dicas de 'Front-End' no Instagram e já estou te seguindo!!! hehe...

Agora, juro que é a última pergunta: É possível deixar esta 'barra de rolagem' da div: invisível?

Dei uma procurada e achei este link mas não sei se aplica-se a este caso... https://www.ti-enxame.com/pt/css/escondendo-barra-de-rolagem-em-uma-pagina-html/969459496/

Valeu mesmo!!! Tudo de Bom!!!

por Giovanna Moeller
| 624.1k xp | 892 posts
Instrutor iOS Software Engineer

Oi Nelson, perdoe a demora para responder!

É possível sim!! Para isso você vai precisar utilizar o CSS. Confesso que nunca fiz, mas acredito que vá precisar do webkit, algo do tipo:

::-webkit-scrollbar {
    width: 0px;
    /* ou display: none; */
}

Você pode ver mais informações nesse link também.

Espero ter ajudado, bons estudos =)