Detectar Scroll hacia abajo | JQuery

tonimito · #1 (**permalink**) 22/03/2012, 13:04

Hola a todos!

Alguien sabría decirme cómo detectar con JQuery si el usuario hace scroll hacia abajo (bottom) de la página, pero sólo quiero detectar cuando va hacia abajo, nunca hacia arriba...alguna idea?

Gracias!!!

Naahuel · #2 (**permalink**) 22/03/2012, 18:16

Yo haría algo así:

Código Javascript:

Ver original$(function(){
    //detectar scroll hacia abajo
    var obj = $(document);          //objeto sobre el que quiero detectar scroll
    var obj_top = obj.scrollTop()   //scroll vertical inicial del objeto
    obj.scroll(function(){
        var obj_act_top = $(this).scrollTop();  //obtener scroll top instantaneo
        if(obj_act_top > obj_top){
            //scroll hacia abajo
            
            
        }else{
            //scroll hacia arriba
            
            
        }
        obj_top = obj_act_top;                  //almacenar scroll top anterior
    });
});

Ejemplo:

Código HTML:

Ver original<!doctype html>
<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(function(){
            //detectar scroll hacia abajo
            var obj = $(document);          //objeto sobre el que quiero detectar scroll
            var obj_top = obj.scrollTop()   //scroll vertical inicial del objeto
            obj.scroll(function(){
                var obj_act_top = $(this).scrollTop();  //obtener scroll top instantaneo
                if(obj_act_top > obj_top){
                    //scroll hacia abajo
                    
                    alert('Abajo');
                    
                }else{
                    //scroll hacia arriba
                    
                    alert('Arriba');
                    
                }
                obj_top = obj_act_top;                  //almacenar scroll top anterior
            });
        });
    </script>
    <title>Test</title>
    <style type="text/css">
    <!--
        body{
            height:3000px;
        }
    -->
    </style>
</head>
<body>
    <p>&nbsp;</p>
</body>
</html>

Claro que nunca usarías alerts de esa forma, son molestos :P

tonimito · #3 (**permalink**) 23/03/2012, 02:56

Gracias tron!
Funciona perfectamente!!!