How to make infinite scroll with pure javascript?

Navigation
4

I'm trying to implement an infinite scroll on my site, like this one , but I'm having difficulty do the script that takes the mouse scroll event. I tried to use this script (below) I got on a website, but it's not exactly what I need. 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;
    
asked by anonymous 25.02.2014 / 15:49

3 answers

2

DOMMouseScroll only works in Firefox, you also have to use onmousescroll to work in other browsers. I made an example scrolling page like that of the link you posted to jsFiddle: link

    
25.02.2014 / 16:57
1

Generic way to make an infinite scroll page is more or less like this , but in case what you want is to type parallax.

Just like in the example of infinite scroll, what you can do is to 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 */
}
    
25.02.2014 / 16:54
1

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 direct call on <div> of your html: 

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

You would like to call js in order to run it in the window, so you should remove this onMouseWheel html event 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

    
25.02.2014 / 19:12
Calculation of the weighted moving average with exponential adjustment Python connection problem Webhook