2011-05-12 28 views
7

Básicamente, me gustaría hacer algo de procesamiento previo antes de que se desplacen los elementos DOM. El problema es que el evento de desplazamiento se dispara DESPUÉS de que se desplacen los elementos DOM. Sé que cuando usa la rueda del mouse para desplazarse, el evento de desplazamiento de la rueda del mouse se dispara antes de que los elementos DOM se desplacen aunque no le proporciona la posición de desplazamiento anticipada y es solo un tipo de desplazamiento. Me pregunto si hay algún evento que se dispare por cada método de desplazamiento (por ejemplo, la rueda del mouse, arrastrando la barra de desplazamiento, presionando la flecha hacia abajo, etc.) ANTES de que se desplacen los elementos del DOM. No tiene que ser un evento. No estoy intentando desplazarme a una posición determinada, por lo que scrollTo no sería aplicable.Evento que se dispara antes (¡no después!) Los elementos DOM se desplazan en javascript

La cadena de evento con el desplazamiento: usuario se desplaza -> elementos DOM desplazarse físicamente -> activa el evento OnScroll -> cosas mango

La cadena deseada del evento: usuario se desplaza -> algún evento es capturado y hacer lo que quiero hacer -> elementos DOM física de desplazamiento -> activa el evento onScroll -> cosas mango

+7

Creo que no tiene suerte. – epascarello

+3

¿Qué estás tratando de hacer antes del desplazamiento DOM que no se puede hacer cuando el onScroll incluso se dispara? Si comparte esa información con nosotros, quizás podamos guiarlo a una solución alternativa. –

+0

Estoy tratando de "pegar" el contenido.A medida que el usuario se desplaza y la parte superior de desplazamiento alcanza cierto píxel, algunos elementos DOM comienzan a "pegarse". En ese breve momento para "pegarse" (reemplazando el elemento original con elemento clonado y posición donde debería "pegarse"), el navegador parece parpadear. Si coloco los elementos clonados justo antes del desplazamiento (probado con el evento de la rueda del mouse), no parpadea. –

Respuesta

0

Aquí hay algo que quizás quieras probar.

Proporcione su página overflow:hidden para que no aparezcan barras de desplazamiento, a continuación, coloque un div totalmente posicionado con el ancho correcto & alto sobre el contenido. Cuando se despliega este div, puede actualizar cualquier contenido subyacente antes de volver a activar el evento.

Tendría que pasar por los clics, etc., así que esto es realmente un truco. Algo como jQuery ayudaría con el desencadenamiento de los eventos y midiendo la altura del contenido.

EDITAR: css pointer-events:none puede ayudar aquí dependiendo del navegador. Ver https://developer.mozilla.org/en/css/pointer-events

+0

Creo que esta es la única forma. –

+0

@Chris Hong: No estoy de acuerdo. 'pointer-events' puede ser útil para Chrome, Safari y Firefox, pero aparte de eso, se necesitará mucho JavaScript para aproximar las posiciones del mouse, de modo que el cursor cambie para identificar enlaces. Los atributos 'title' se perderán y la selección de texto será aún más difícil. Definitivamente este no es el camino a seguir, piratear o no. Un truco más robusto implicaría capturar eventos 'onmousewheel',' DOMMouseScroll' y 'keydown' para detectar cuando un usuario se desplaza, pero no ayuda cuando arrastran la barra de desplazamiento. –

+0

Pensando en ello un poco más, el DIV no tendría que cubrir el contenido, de hecho podría tener solo 1px de ancho en el margen derecho, haciendo que aparezca una barra de desplazamiento que luego se usa para capturar y desencadenar todos los eventos de desplazamiento (sería el único elemento que no fue desbordamiento: oculto). Y, o bien necesitaríamos un temporizador para obtener la altura del documento actual, o bien, construir una solución compatible de altura entre exploradores: 100% ' –

0

lo mejor que puede hacer es cuando onScroll incendios, si scrollTop>thingToStick 's la distancia desde la parte superior, a continuación, establezca position: fixed en thingToStick de lo contrario, establezca position en lo que sea originalall y Parpadeará cuando cambie de no adherirse a pegarse, pero además de eso, no obtendrá ningún parpadeo.

en sudo-ish código:

onScroll = function() 
{ 
    if(scrollTop > thingToStick.y) 
     thingToStick.position = "fixed"; 
    else 
     thingToStick.position = "relative"; 
} 

En los navegadores que no soportan fixed posicionamiento, que está pegado con el parpadeo ...

+0

Gracias por el consejo. Pero estamos tratando de evitar cualquier parpadeo. –

+0

no hay mucho más que pueda hacer, me temo ... – MicronXD

0

Nunca tryed esto antes, pero para romper el la cadena de eventos que sería posible:

  1. capturar el evento de desplazamiento
  2. hacer sus cosas
  3. Uso preventDefault() y stopPropagation para inhibir el evento
  4. falso un nuevo evento de desplazamiento utilizando el original (esto debería ser factible creo)

Esperamos que esto ayude.

+0

En el momento en que captura el evento de desplazamiento, los elementos ya se han desplazado. –

+1

Scroll es un evento asíncrono, por eso no se puede evitar a través del objeto de evento de desplazamiento que recibe en los detectores onscroll;) – csuwldcat

Cuestiones relacionadas