How to scroll infinity with pure javascript?

Question

I’m trying to implement an infinite scroll on my site, like this one, but I’m having trouble making the script that picks up the mouse scrolling event. I tried using this script (below) that I picked up on a website, but it’s not exactly what I need. Does anyone have any suggestions?

cont=0
function handle(delta) {
    var nav = document.getElementById('navegacao');
    var ln = nav.getElementsByTagName('a');
    if (delta < 0){
        cont=cont+1;
        ln[cont].click();
    }
    else{
        cont=cont-1;
        ln[cont].click();
    }
}

function wheel(event){
    var delta = 0;
    if (!event) event = window.event;
    if (event.wheelDelta) {
        delta = event.wheelDelta/120; 
    } else if (event.detail) {
        delta = -event.detail/3;
    }
    if (delta)
        handle(delta);
        if (event.preventDefault)
                event.preventDefault();
        event.returnValue = false;
}

/* Initialization code. */
if (window.addEventListener)
    window.addEventListener('DOMMouseScroll', wheel, false);
    window.onmousewheel = document.onmousewheel = wheel;

Answer 1

Dommousescroll only works on Firefox, you also have to use onmousescroll to work on other browsers. I made an example of paging with scroll like the link you posted in jsFiddle: http://jsfiddle.net/c6PPv/3/

Answer 2

In a generic way to make an infinite scroll page is sort of like this, but in case what you want is to do like a parallax.

Just like in the example of infinite scroll what you can do is prevent successive events from being processed, so use a timeout:

var scrolling;
function wheel () {
  if (scrolling) {return;}

  scrolling = true;
  setTimeout(function () {
    scrolling = false;
  }, 200 /* o tempo para animar a página */);

  /* o resto da função */
}

Answer 3

With the code you developed here that would be:

var count=0;
function Picture(){
    if (event.wheelDelta >= 4){
        if(count == 3){
            count=-1;
        }else{
            Resize(++count);
        }
    }
    else if (event.wheelDelta <= 4)
        if(count == 0){
            count=4;
        }else{
            Resize(--count);
        }
    return false;
}
function Resize(c){    
    var nav = document.getElementById('navegacao');
    var btn = nav.getElementsByTagName('li');
    var ln = nav.getElementsByTagName('a');
    ln[c].click();
}

Using the direct call on <div> of your html:

<divclass="box" id="janela-home" onMouseWheel="Picture()"></div>

You would like to call in js for it to run in window, so you should remove this event onMouseWheel html and use the following code:

var mousewheelevt=(/Firefox/i.test(navigator.userAgent))? "DOMMouseScroll" : "mousewheel" //Firefox não reconhece o mouseWheel na versão FF3.x

if (document.attachEvent) //para IE (e Opera dependendo das configurações do usuário)
    document.attachEvent("on"+mousewheelevt, function(e){Picture()})
else if (document.addEventListener) //WC3 browsers
    document.addEventListener(mousewheelevt, function(e){Picture()}, false);

Reference