1

tengo 2 problemas, esto que estoy haciendo no funciona, si en el body pongo overflow = hidden

y funciona si me desplazo de uno a dos, pero de dos a uno no funciona, se queda pillado.

A ver si me podeis echar una mano

$(document).ready(function() {  

/******** Desplazamiento vertical ********/

$(function () {
  var $win = $(window);
  var $pos = $(window).height();
  var uno = $(".uno").offset().top;
  var dos = $(".dos").offset().top;

  $win.scroll(function () {
    if ($win.scrollTop() <= $pos) {
      $("html, body").animate({
        scrollTop: dos
      }, 2000);
    }
    else  {
      $("html, body").animate({
          scrollTop: uno
      }, 2000);
    }    
  }); 
});

   /********  ********/

});
.uno {
  background-color: blue;
  top: 0;
  left: 0;
  width: auto;
  height: 100vh;
}

.dos {
  background-color: red;
  top: 0;
  left: 0;
  width: auto;
  height: 100vh;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<main>
<section class="uno">
</section>
<section class="dos">
</section>
</body>
</html>

5
  • Un par de problemas: no controlas si el scroll es producido por el usuario o generado por la propia animación, lo que va a hacer que se dispare la función de animación varias veces. Luego $win.scrollTop() <= $pos siempre va a ser verdadero cuando intentes moverte de "dos" a "uno" porque la altura de la sección es igual a la altura de la ventana, por eso siempre que intentes hacer scroll de "dos" a "uno" la animación se disparará como si estuvieras haciendo de "uno" a "dos". Ahora mismo estoy en un móvil y no puedo hacer mucho, pero si no consigues respuesta, le echo un ojo luego desde un pc.
    – Alvaro Montoro
    el 15 jun. 2018 a las 12:51
  • Ok yo hasta el lunes no lo podre probar. así que hay tiempo. Tienes razón se va subiendo y bajando cada x tiempo por si solo. Una cosa que me dijeron para ocultar el scroll es al conntenddor poner overflow: hidden y al hijo overflow: scroll y dandole al hijo por ejemplo un width: 110% para forzar sacar el scroll de la ventana. Pero estoy seguro que hay algo más elegante que eso. Gracias el 15 jun. 2018 a las 13:14
  • A ver si me podeis echar una mano con esto, que aun no lo he solucionado el 18 jun. 2018 a las 15:30
  • He realizado modificaciones pero sigue haciendo lo mismo $(function () { var uno = $(".uno").offset().top; var dos = $(".dos").offset().top; $(window).scroll(function () { if ($('.uno').scrollTop() + 1) { $("html, body").animate({ scrollTop: dos }, 2000); } else if ($('.dos').scrollTop() - 1) { $("html, body").animate({ scrollTop: uno }, 2000); } }); }); el 19 jun. 2018 a las 15:59
  • Deja y lo miro en un momento
    – Alvaro Montoro
    el 19 jun. 2018 a las 16:48

1 respuesta 1

0

El código presenta algunos problemas:

  • No controlas si el scroll es producido por el usuario o generado por la propia animación, lo que va a hacer que se dispare la función de animación varias veces.

  • $win.scrollTop() <= $pos siempre va a ser verdadero cuando intentes moverte de "dos" a "uno" porque la altura de la sección es igual a la altura de la ventana, por eso siempre que intentes hacer scroll de "dos" a "uno" la animación se disparará como si estuvieras haciendo de "uno" a "dos".

Una opción que puedes seguir para corregir esos problemas:

  1. Añade una variable que controle si el scroll se está produciendo por la animación y dale el valor false por defecto. Esta variable funcionará como semáforo para evitar que se dispare varias veces.
  2. Añade una variable que controle qué sección está activa. Dale el valor "uno" por defecto.
  3. Dentro del controlador de la animación:

    • Haz que la animación sólo se ejecute si no se está ejecutando ya (comprobando el valor de la variable creada en el punto 1 sea false).
    • Actualiza el valor de la variable creada en el punto 1 a true.
    • En lugar de comprobar la altura, comprueba la sección activa (comprobando el valor de la variable creada en el punto 2).

      Nota: este método funciona para dos secciones; si tienes más, además de comparar la sección activa, debes comprobar si el scroll se ha hecho hacia arriba o abajo para ir a la sección correspondiente. Pero parece que tu ejemplo es particular para dos, así que no debería haber problema.

    • Añade una función que se ejecutará al completarse la animación y en la que: se reseteará la variable creada en el punto 1 a false (para que se vuelvan a hacer animaciones) y se actualizará el nombre de la sección actual (de "uno" a "dos" o viceversa).

      Nota: he tenido que añadir un pequeño retardo al reseteo de la variable animacion porque si no parece que coincidía con la última parte de la animación y se disparaba (volviendo al punto original).

Aquí puedes ver esos cambios funcionando:

var animacion = false;
var actual = "uno";

$(document).ready(function() {

  /******** Desplazamiento vertical ********/

  $(function() {
    var $win = $(window);
    var $pos = $(window).height();
    var uno = $(".uno").offset().top;
    var dos = $(".dos").offset().top;

    $win.scroll(function() {

      if (!animacion) {
        animacion = true;
        if (actual == "uno") {
          $("html,body").animate({
            scrollTop: dos
          }, 
          2000, 
          function() {
            setTimeout("animacion = false", 20);
            actual = "dos";
          });
        } else {
          $("html,body").animate({
            scrollTop: uno
          }, 
          2000,
          function() {
            setTimeout("animacion = false", 20);
            actual = "uno";
          });
        }
      }
    });
  });

  /********  ********/

});
.uno {
  background-color: blue;
  top: 0;
  left: 0;
  width: auto;
  height: 100vh;
}

.dos {
  background-color: red;
  top: 0;
  left: 0;
  width: auto;
  height: 100vh;
}

html,
body {
  margin: 0;
  padding: 0;
  border: 0;
}
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>

<body>
  <main>
    <section class="uno">
    </section>
    <section class="dos">
    </section>
  </main>
</body>

</html>

5
  • Muchísimas gracias Álvaro, mañana lo pruebo sin falta. Lo estaba haciendo mal, o que tenía que controlar era la animación. Habría alguna manera de hacerlo pero escondiendo la barra del scroll el 19 jun. 2018 a las 19:11
  • Hola Alvaro, aunque tu código funciona aquí e incluso lo he probado en una pagina y funciona, cuando lo pongo en la web que ha de ir no hace. e inspeccionando el código el navegador me indica que las variables animacion y actual no están declaradas, así que las declaro vacías: let animacion; let actual; pero sigue sin hacer nada, así que pongo `let animacion = false; let actual="uno"; entonces solo funciona de uno a dos el 20 jun. 2018 a las 17:19
  • 1
    Haciendo pruebas conseguí que me funcionase, pero me pivotaba en un bucle sin fin. el 20 jun. 2018 a las 17:24
  • @IsaacPalacio genial! me alegro que al final consiguieses resolverlo. Pon una respuesta con el código que usaste al final y una descripción de lo que hace, y acepta esa respuesta cuando pase el tiempo requerido
    – Alvaro Montoro
    el 20 jun. 2018 a las 17:43
  • No Álvaro, no funciona, te estoy diciendo que o me pivota o solo funciona de uno a dos el 20 jun. 2018 a las 18:09

Tu Respuesta

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

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