1

Tengo un carrusel de fotografías con efecto parallax montado en Bootstrap. Quiero conseguir que cuando el usuario hace scroll hacia abajo en una diapositiva, forzar la página a que baje hasta abajo, y cuando el usuario hace scroll hacia arriba, forzar la página a que suba hasta arriba. Aquí tenéis una imagen que ilustra el comportamiento que quiero obtener:

introducir la descripción de la imagen aquí

Os adjunto un CodePen para que veáis lo que tengo montado hasta ahora (enlace a CodePen). Como podéis ver, cuando hacéis scroll hacia abajo, aparece el "caption slide". El problema es que si haces muy poco scroll, el "caption slide" queda a la mitad... Lo que yo quiero conseguir es detectar la dirección del scroll y forzar la página a que baje o suba del todo, de tal forma que el "caption slide" se muestre entero o no se muestre, pero que nunca se muestre una parte nada más.

La detección de la dirección la tengo hecha, pero lo que no tengo narices de hacer es lo de forzar el scroll. Aquí tenéis parte del código jQuery que me detecta la dirección:

$(function(){
    var _top = $(window).scrollTop();
    var _direction;
    $(window).scroll(function(){
        var _cur_top = $(window).scrollTop();
        if(_top < _cur_top)
        {
            _direction = 'down';
        }
        else
        {
            _direction = 'up';
        }
        _top = _cur_top;
        console.log(_direction);
    });
});

A partir de aquí estoy perdido... he buscado en internet y no hay manera. Ni si quiera sé como se llama técnicamente lo que quiero hacer!! Scroll Hijacking???

Toda ayuda será bienvenida. Muchas gracias!! Saludos

1
  • La mejor forma de buscarlo con es Scroll Hijacking sino scroll jquery animate
    – Jose
    el 17 jul. 2019 a las 11:45

1 respuesta 1

1

Este es el código que yo utilizaría:

var ultimoscroll=0;
var animacion=false;
$(window).scroll(function(){
    var st=$(this).scrollTop();
    if(st>ultimoscroll){
        if(animacion==false){
            animacion=true;
            //Cuando baja
            $("html, body").animate({
                scrollTop: $("#elemento_scroll").offset().top
            },500,function(){
                ultimoscroll=$(window).scrollTop();
                animacion=false;
            });
        }
    }else{
        if(animacion==false){
            animacion=true;
            //Cuando sube
            $("html, body").animate({
                scrollTop: 0,
            },500,function(){
                ultimoscroll=$(window).scrollTop();
                animacion=false;
            });
        }
    }
});

Lo que hace es guardar en una variable (ultimoscroll) la información del último scroll y detecta si estas bajando o subiendo el scroll.

Si esta bajando se va hacia el elemento que quieras hacer scroll (No es muy recomendable ir hacia abajo del todo por la compatibilidad de dispositivos)

Y si haces scroll hacia arriba va hacia arriba del todo

Edición:

El porque el código anterior no subía era porque el propio evento de jquery (scroll) se ejecutaba mientras hacia la animación por lo tanto hacia 30 eventos seguidos. Con 0.5 segundos por cada animación. Eso provocaba que hiciese un evento tras otro. Vamos, tenias que esperar 15s para ir hacia arriba.

Para este problema lo que he hecho es añadirle una variable que comprueba si se esta animando. Y cuando se acaba la animación devuelve al valor inicial la variable por lo que puedes ejecutar otra animación

5
  • gracias! He probado tu código. Lo he tenido que adaptar un poco a mi maqueta. Con $(window) no me funcionaba. Debe ser por el efecto parallax que tiene el div en el que hago el scroll. Lo he substituido por el ID del div y voila! ha funcionado (parcialmente!). El scroll hacia abajo funciona, pero hacia arriba no!!! He probado mil cosas y nada... he actualizado el CodePen con el código nuevo, para ver si me pudieras echar de nuevo una mano. Gracias!
    – hormigaz
    el 17 jul. 2019 a las 16:02
  • He estado mirando un poco el código... Y hay que decir que es un desastre :S. (Cuanto mal ha hecho el boostrap)
    – Jose
    el 18 jul. 2019 a las 1:04
  • Ya lo he solucionado
    – Jose
    el 18 jul. 2019 a las 1:41
  • ahora sí! solucionado el efecto up&down!! muchas gracias @matahombres!! tan mal ves el código?? :(
    – hormigaz
    el 18 jul. 2019 a las 7:49
  • Bueno, yo estoy acostumbrado a no utilizar boostrap por lo se ve diferente, lógicamente...
    – Jose
    el 18 jul. 2019 a las 16:12

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.