Explorador de eventos Scroll javascript

¿Hay un escuchas js para cuando un usuario se desplaza en un cierto cuadro de texto que se puede usar? Un poco como hacer clic excepto para desplazarse. Vi HTML5 event listener for number input scroll - Chrome only pero parece ser solo para Chrome. Estoy buscando algo entre navegadores.Explorador de eventos Scroll javascript

Fuente

2012-09-21 Kpower

'si (jQueryIsAllowed)' http://api.jquery.com/scroll/ – Whymarrh

Para aquellos que encontraron esta pregunta con la esperanza de encontrar una respuesta que no implique jQuery, se conecta al evento de "desplazamiento" window utilizando la escucha de eventos normales. Decimos que queremos añadir desplazamiento escuchar una serie de elementos CSS-selector-poder:

// what should we do when scrolling occurs 
var runOnScroll = function(evt) { 
    // not the most exciting thing, but a thing nonetheless 
    console.log(evt.target); 
}; 

// grab elements as array, rather than as NodeList 
var elements = document.querySelectorAll("..."); 
elements = Array.prototype.slice.call(elements); 

// and then make each element do something on scroll 
elements.forEach(function(element) { 
    window.addEventListener("scroll", runOnScroll); 
});

de puntos de bonificación, se puede dar el manejador de desplazamiento de un mecanismo de bloqueo para que no se ejecuta si ya estamos Desplazamiento:

// global lock, so put this code in a closure of some sort so you're not polluting. 
var locked = false; 
var runOnScroll = function(evt) { 
    if(locked) return; 
    locked = true; 
    // ...your code goes here... 
    locked = false; 
};

Fuente

2013-08-30 21:38:11

Simplemente curioso - y no está seguro si importa - pero debería volver useCapture falsa o verdadera para el detector de eventos de desplazamiento? – beefchimi

no importa - la configuración 'useCapture' es una forma de asegurarse de que el controlador se dispare antes de que los manejadores reciban el evento debido al burbujeo o" No me importa el orden en que se invoca "al no configurar' useCapture'. Sin embargo, no es demasiado útil para eso, ya que no hay garantía de orden de llamada cuando se usan múltiples oyentes con 'useCapture = true'. –

Muy limpio, pero ¿no mata esto el rendimiento de desplazamiento ya que estamos agregando un detector en desplazamiento por todos los elementos que estamos seleccionando? Creo que nos gustaría centralizar la lógica de Desplazamiento para que podamos administrar lo que se ejecuta. ¿Qué has encontrado? – gdbj

¿De acuerdo con el enfoque básico a continuación no es suficiente con sus requisitos?

Código HTML tener un div

<div id="mydiv" onscroll='myMethod();'>

JS tendrá continuación Código

function myMethod(){ alert(1); }

Fuente

2013-10-22 10:13:41 Satya

En un sentido estricto esto es una 'función', no un' método' :-) –

Depende si 'myMethod' es global -' window.myMethod';). – maximedupre

que estaba buscando mucho para encontrar una solución para el menú Sticy con JS de la vieja escuela (sin jQuery) . Así que construyo una pequeña prueba para jugar con ella. Creo que puede ser útil para aquellos que buscan una solución en js. Necesita mejoras para despegar el menú hacia atrás y hacerlo más suave. También encuentro una buena solución con JQuery que clona el div original en lugar de la posición fija, es mejor ya que el resto del elemento de la página no necesita ser reemplazado después de la reparación. Alguien sabe cómo eso con JS? Por favor, comenta, corrige y mejora.

<!DOCTYPE html> 
<html> 

<head> 
<script> 

// addEvent function by John Resig: 
// http://ejohn.org/projects/flexible-javascript-events/ 

function addEvent(obj, type, fn) { 

    if (obj.attachEvent) { 

     obj['e'+type+fn] = fn; 
     obj[type+fn] = function(){obj['e'+type+fn](window.event);}; 
     obj.attachEvent('on'+type, obj[type+fn]); 
    } else { 
     obj.addEventListener(type, fn, false); 
    } 
} 
function getScrollY() { 
    var scrOfY = 0; 
    if(typeof(window.pageYOffset) == 'number') { 
     //Netscape compliant 
     scrOfY = window.pageYOffset; 

    } else if(document.body && document.body.scrollTop) { 
     //DOM compliant 
     scrOfY = document.body.scrollTop; 
    } 
    return scrOfY; 
} 
</script> 
<style> 
#mydiv { 
    height:100px; 
    width:100%; 
} 
#fdiv { 
    height:100px; 
    width:100%; 
} 
</style> 
</head> 

<body> 

<!-- HTML for example event goes here --> 

<div id="fdiv" style="background-color:red;position:fix"> 
</div> 
<div id="mydiv" style="background-color:yellow"> 
</div> 
<div id="fdiv" style="background-color:green"> 
</div> 

<script> 

// Script for example event goes here 

addEvent(window, 'scroll', function(event) { 

    var x = document.getElementById("mydiv"); 

    var y = getScrollY();  
    if (y >= 100) { 
     x.style.position = "fixed"; 
     x.style.top= "0"; 
    } 
}); 

</script> 
</body> 
</html>

Fuente

2015-05-06 07:24:51 Naomi

Explorador de eventos Scroll javascript

Respuesta

Cuestiones relacionadas