[SOLUCIONADO] Por qué no me funciona el scrollTop?

[daysil]

Hola a todos, le agradecería mucho que me ayudaran con el scrollTop. Resulta que tengo un div que contiene otros div dentro, pero quiero que me los muestre por filas de divs pequeños.


Puedo tener una o muchas filas de divs pqueños:


tengo este codigo:

Código:

$(".div-grande").scroll(function(event) {
        var $this = $(this);
        var oldTop = $this.scrollTop();
        var newTop = (Math.round(oldTop / 246) ) * 246; //246 es la altura de los divs pequeños
        $this.scrollTop(newTop);
      });

Resulta que me funciona el scroll del mouse en ocasiones, la barra del scroll si trabaja bien, pero los botones de subir y bajar que tiene el scroll no funciona. (este es el comportamiento para Chrome en IE por ejemplo el comportamiento es otro, y también incorrecto).
"Debuguiando" el código me di cuenta que en ocasiones no captura bien el oldTop, creo que el problema está dado por eso.
Espero verme explicado bien, desde YA muchísimas GRACIAS!!!

[Alexis88]

¿Y cómo esperas a que lo capture bien si no lo escribes bien?

Es $(this).scrollTop(), no $this.scrollTop().

Saludos

[daysil]

Disculpa, pero acaso

Código:

var $this = $(this);
var oldTop = $this.scrollTop();

no es lo mismo que

Código:

$(this).scrollTop()

?

[daysil]

Disculpa, pero acaso

Iniciado por daysil

var $this = $(this);
var oldTop = $this.scrollTop();

no es lo mismo que

Código:

$(this).scrollTop()

?

[Alexis88]

Debo de estar ciego que no vi la parte en la que declarabas esa variable.

Y con lo de que "no captura bien" el valor, ¿lo captura a medias o qué?

[daysil]

En el caso del scroll del mouse puede lo mismo capturar por ejemplo "0" que "200" o cualquier otro valor. Si intento trabajar por los botenes de subir y bajar de la barra de scroll siempre me captura "0" (claro estos valores es suponiendo que me encuentro en el top del div GRANDE)

[Alexis88]

¿Podrías mostrarnos esto mediante alguna página como JSBin o JSFiddle, por favor? Sería de mucha utilidad probarlo en vivo y así analizar lo que ocurre.

Un saludo

[daysil]

Intenta con este link: http://jsfiddle.net/collabcoders/v2RbN/1/#&togetherjs=8qqC2ITMUR

Espero que no tengas problemas, nunca había usado esas páginas.

Me es imposible poner el proyecto real, ahí puse un ejemplo, en el que funciona bien el scroll del mouse pero no los botones de la barra del scroll.

Muchas gracias por tu ayuda...

[Alexis88]

No sé tú, pero lo acabo de probar y funciona todo, incluidos los botones del scroll.

[daysil]

Hola, yo no se trabajar mucho en esas páginas y no se si te compartí bien el link, ahora entré y ese código no es el que quería mostrarte . Por favor si no te es mucha molestia, podrías copiar y pegar este código?

Código HTML:

<div class="box">
     <div class="small" style="background-color: red">All your text content...<br></div>
     <div class="small" style="background-color: pink">All your text content...<br></div>
     <div class="small" style="background-color: blue">All your text content...<br></div>
     <div class="small" style="background-color: purple">All your text content...<br></div>
     <div class="small" style="background-color: yellow">All your text content...<br></div>
     <div class="small" style="background-color:green">All your text content...<br></div>     
     <div class="small" style="background-color:orange">All your text content...<br></div> 
</div> 

Código:

$(".box").scroll(function() {
   		var $this = $(this);
        var oldTop = $this.scrollTop();
        var newTop = (Math.round(oldTop / 200) ) * 246; 
        $this.scrollTop(newTop);
  });


/*----------CSS---------*/
div.box{
  width: 200px;
  height: 200px;
  overflow: scroll;
}
div.small{
  width: 200px;
  height: 100px;
}

Una vez más... GRACIAS!!!

[Alexis88]

Haciendo pruebas, veo que se genera la misma cifra para el nuevo valor y por eso no se mueve, pero moviendo la barra manualmente, sufre para desplazarse hasta que lo hace. Es un poco extraño este comportamiento.

¿Pretendes que al producirse el scroll, la barra se desplace de alguna manera en especial?

[daysil]

Hola Alexis88 muchas gracias por tu tiempo...

Lo que quiero obtener con el scroll (ya sea con el scroll del mouse, moviendo manualmente la barra de scroll, o con los botones que esta tiene para subir y bajar) es que me muestre de fila en fila. Para esto creo que necesito capturar la posición actual y sumarle o restarle 246px que es la altura de las filas internas, y de esta forma me mostraría la fila de arriba o la de abajo. Con respecto a la barra del scroll no quiero nada especial, solo que el salto sea de 246 en 246. No sé si me expliqué muy bien...

GRACIAS!!!

[Alexis88]

La barra de desplazamiento está para que el usuario pueda desplazarse, ya sea en el documento o dentro de alguno de sus elementos, a su antojo, por lo que creo que limitarle esa opción no es lo adecuado.

Pienso que sería mejor y más fácil de hacer si tuvieras dos botones para subir y bajar y cada vez que pulses alguno de ellos, desplazas el scroll mediante la propiedad scrollTop.

Por ejemplo.

Todo está en desplazar el scroll hacia arriba o abajo, restándole o sumándole a la propiedad antes mencionada su altura o la altura de los elementos que contiene.

Un saludo

[daysil]

Disculpa pero parece que no me expliqué bien. Yo si quiero que todos los componentes de la barra del scroll funcionen. De hecho quiero que todos funcionen de la misma manera y como el usuario lo desee (es decir, que se desplace a su antojo).

Cuando me refiero a "ya sea con el scroll del mouse, moviendo manualmente la barra de scroll, o con los botones que esta tiene para subir y bajar" es precisamente eso (como se muestra en la imagen).

1. Sroll del mouse (me refiero a la rueda del mouse)
2. La barra (de la barra de scroll)
3. Los botones de subir y bajar de la barra de scroll

Quiero que salte de fila de divs en fila de divs (en la imagen muestro la primera fila solamente, pero en el pequeño ejemplo que hemos visto con los colores, sería de color en color). Para ello debo obtener la posición actual (cuando debuggeo el código aqui es donde veo el problema: var oldTop = $this.scrollTop(); que me toma un valor incorrecto, por lo general < 200 por tanto no se mueve (Math.round(oldTop / 200) ) * 200) cuando uso el caso [1] y [3]). Solo la barra (de la barra de scroll [2] funciona correctamente).

Una vez más gracias por tu dedicación...

[Alexis88]

Una manera de hacer esto consiste en guardar la posición anterior del scroll y la nueva por cada vez que se produzca el evento —que es más o menos lo que has venido haciendo—, luego, comparas a ambos valores y desplazas el scroll hacia arriba si la nueva posición es menor que la anterior, o hacia abajo si la nueva posición es mayor que la anterior. La cantidad a desplazarse será igual a la altura del contenedor o de los hijos de este por el valor de un contador que aumentará o disminuirá de a uno ya sea que se esté subiendo o bajando.

Código HTML:

<div id = "padre">
    <div class = "hijo"></div>
    <div class = "hijo"></div>
    <div class = "hijo"></div>      
</div>
 

Código Javascript:

var padre = document.querySelector("#padre"),
    ant = 0, //Posición anterior del scroll
    pos = 0, //Nueva posición del scroll
    i = 0; //Contador
 
padre.addEventListener("scroll", function(){
    pos = this.scrollTop; //Tomo la nueva posición
    if (pos > ant){ //Si está bajando
        this.scrollTop = this.offsetHeight * ++i;
    }
    else if (pos < ant){ //Si está subiendo
        this.scrollTop = this.offsetHeight * --i;
    }
    ant = this.scrollTop; //Actualizo la vieja posición
}, false);
 

DEMO

Un saludo

[daysil]

Gracias...

Eres un genio!!! llevo justo una semana luchando con esta "bobería". Problema resuelto