Scroll event listener javascript

Existe um ouvinte js para quando um utilizador se desloca numa determinada caixa de texto que pode ser usada? É como o onclick, excepto o Rolling. Eu vi {[[2]}O leitor de eventos HTML5 apenas para os números de entrada scroll - Chrome mas isso parece ser apenas para o cromado. Estou à procura de algo cruzado.

 35
javascript
Author: Community, 2012-09-21
Source

3 answers

Para aqueles que encontraram esta pergunta na esperança de encontrar uma resposta que não envolva jQuery, você se conecta ao evento {[[2]} "scroll" usando a audição normal de eventos. Digamos que queremos adicionar um scroll listening para um número de elementos CSS-selector-able: 

// 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);
});

Para pontos de bónus, você pode dar ao manipulador de rolos um mecanismo de bloqueio para que ele não corra se já estivermos a rodar: 

// 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;
};
 89
Author: Mike 'Pomax' Kamermans, 2014-12-10 19:07:03
{[[2]} eu estava procurando muito para encontrar uma solução para o sticy menue com JS da velha escola (sem JQuery). Então eu construo um pequeno teste para brincar com ele. Acho que pode ser útil para aqueles que procuram solução em js. Precisa de improvisos para desbloquear a menue e torná-la mais suave. Também eu encontrar uma boa solução com JQuery que clones o div original em vez de posição fixa, é melhor, uma vez que o resto do elemento página não precisa ser substituído após a fixação. Qualquer um sabe como fazer isso com o JS. ? Por favor, observe, corrija e melhore. 
<!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>
 2
Author: Naomi Fridman, 2015-05-06 07:24:51
A abordagem básica abaixo não é suficiente?

Código HTML com um div 

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


JS terá o código abaixo 

function myMethod(){ alert(1); }
 0
Author: Satya, 2013-10-22 10:13:41