[SOLUCIONADO] Control de Scroll Arriba y Abajo.

[Valkirios]

Saludos a todos!
Llevo varios días intentando encontrar un modo de controlar el movimiento de scroll que se hacen con el ratón tanto hacia arriba como hacia abajo. La idea sería que cuando se girara, por ejemplo el scroll hacia abajo, se sumara un +1 a una variable, para de esta manera tenerlo controlado, y si se subiese hacia arriba, a la variable se le restara un -1.

gracias de antemano, un saludo!

[IsaBelM]

hay métodos que te dan la posición

posicion = self.pageYOffset || (document.documentElement.scrollTop + document.body.scrollTop)

esto lo insertas en una función invocada con el evento onscroll y ya está

[Valkirios]

Hola IsabelM, gracias por contestar!

El problema es que no quiero saber la posición, quiero que al hacer un movimiento de scroll hacia abajo, se posicione en la siguiente sección, y cuando se haga el movimiento de scroll hacia arriba, se posicione en la sección/div anterior.

Un ejemplo de que lo explico lo podemos encontrar en esta página: http://www.skinjay.es/

Gracias de antemano para quien me pueda echar un cable! Un saludo!

[Panino5001]

Justamente lo que te dijo Isabel es lo que necesitás:

Código:

if(posicion>x && posicion<y){
    //hacer algo
}else if(posicion>=y && posicion<z){
     //hacer otra cosa
}

Y si no, buscá parallax scrolling y vas a encontrar muchos prefabricados que te ayudarán con esta técnica abominable.

[Valkirios]

Hola Panino, gracias por responder, tampoco me gustan demasiado a mí las páginas de este tipo, el problema es que se están poniendo bastante de moda y uno tiene que aprender y adaptarse.

Lo de Parallax está bien, y alguna idea he cogido ya sobre ello, de hecho lo utilizo para animar ciertas capas.

Lo que entiendo es que con la solución que vosotros me dais, es util, pero para páginas donde cada section o div o lo que se quiera tomar como referencia, siempre van a tener la misma altura o posición. El problema es que yo lo estoy haciendo escalar, siempre en referencia al tamaño de la pantalla, por lo que las alturas y posiciones van a variar todo el tiempo, ya por que el usuario minimice la pantalla o por la resolución de la misma.

Es x eso que quiero contabilizarlo dentro de un contador, y en función de ese valor se desplace la pantalla de un lugar a otro.

He conseguido hacer esto:

var mousewheelevt = (/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll" : "mousewheel" //FF doesn't recognize mousewheel as of FF3.x
var contador=1;
$(window).bind(mousewheelevt, function(e){
var evt = window.event || e //equalize event object
evt = evt.originalEvent ? evt.originalEvent : evt; //convert to originalEvent if possible
var delta = evt.detail ? evt.detail*(-40) : evt.wheelDelta //check for detail first, because it is used by Opera and FF
if(delta > 0)
{
if(contador!=0 && contador!=1)
{
contador=contador-1;
}
}
else
{
if(contador!=8)
{
contador=contador+1;
}
}

$("html, body").animate($.scrollTo('#capa'+contador+'', 1000));

});

El problema que me da es que al hacer scroll, si se le da suave a la ruleta, si que se contabiliza como 1, y se suma o se resta de uno en uno, el problema es que ahora necesito poner como un temporizador o una función que bloquee el scroll del ratón a un solo movimiento cada vez que se pulse la ruleta.

Sé que es complejo, y que tal vez no me explico de la mejor manera posible...

Un saludo y muchas gracias.

[Panino5001]

Estás mezclando cosas. Lo de la variación de alturas y demás tenés que investigar acerca de responsive design o trabajar tu css con medidas relativas (em, %), y también el concepto de viewport o dimensiones de la porción visible de la ventana del navegador, cuya altura en navegadores modernos se calcula con document.documentElement.clientHeight (y en no tan modernos podés ver algo así: http://www.disegnocentell.com.ar/notas2.php?id=175)

El uso de esta técnica (parallax scrolling) complica un poco el responsive design, pero es posible de todas maneras lograr un resultado aceptable. Te muestro un ejemplo que usa lo que señaló Isabel y que es adaptable (hasta cierto punto: en su momento sólo tuve unas pocas horas para armarlo) a la altura del navegador: http://padresdeotragalaxia.com/index.php