1
resposta

Problema com onScroll

Boa noite. Não consigo usar a função "onScroll". Todas as outras estão funcionando normalmente. Já tentei usar apenas a "onScroll" e ainda assim não deu certo. Alguém saberia o motivo?

Segue código:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Teste</title>
    </head>
    <body>

        <div onClick="printaC()" onPointerMove="printaPM()" onWheel="printaW()" onScroll="printaS()" style="height: 5000px">
        </div>
    </body>

    <script>
        function printaC() {
            console.log("click");
        }
        function printaPM() {
            console.log("moveu cursor");
        }
        function printaW() {
            console.log("girou roda");
        }
        function printaS() {
            console.log("rolou");
        }
    </script>

</html>
1 resposta

Boa tarde,

Um evento de Scroll acontece quando o conteúdo de um elemento é maior do que o próprio elemento.

Para um melhor entendimento veja o exemplo a seguir: https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onscroll

Nele existe um conteúdo (texto) maior do que o elemento em si (div), logo o navegador entende que é necessária uma barra de scroll e o evento 'onScroll' pode ocorrer. Se a div for maior que o texto o scroll não é mais necessário.

No seu caso o elemento (div) não tem conteúdo nenhum, então não existe scroll e por consequência o evento não ocorre.

*Importante ressaltar também que é necessário sinalizar via CSS que o elemento permite scroll, usando: "overflow: scroll;".

Espero ter ajudado.