4

Estou tentando implementar um scroll infinito no meu site, como este aqui, porém estou com dificuldades para fazer o script que pega o evento de rolagem do mouse. Tentei usar esse script (abaixo) que peguei em um site, mas ele não é exatamente o que preciso. Alguém tem alguma sugestão?

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;
6
  • O que esse código faz que você não gosta? O que exatamente você precisa fazer?
    – bfavaretto
    Commented 25/02/2014 às 15:03
  • Então @bfavaretto eu preciso que quando eu realize a rolagem do mouse passe para o próximo elemento da minha página tipo assim: wandaprint.com/home porém esse código (que postei e foi o único que encontrei), pula de dois em dois elementos Oo
    – Odair
    Commented 25/02/2014 às 15:07
  • Esse site aí não passa no PageSpeed: o preloader dele está perto dos 20% aqui já faz quase um minuto. Commented 25/02/2014 às 15:20
  • hahahaha @GustavoRodrigues Realmente é um site muito pesado, tem muitas imagens, mas é um site bem feito (a parte de design pelo menos rs)
    – Odair
    Commented 25/02/2014 às 15:22
  • Ainda espero que o PageSpeed popularize, ainda mais aqui no Brasil onde as velocidades não são tão altas. Espero que ele termine de carregar para eu poder comentar sobre ele. Commented 25/02/2014 às 15:24

3 Respostas 3

2

DOMMouseScroll só funciona no Firefox, você também tem que usar onmousescroll para funcionar em outros browsers. Fiz um exemplo de paginação com scroll como a do link que você postou no jsFiddle: http://jsfiddle.net/c6PPv/3/

10
  • não funcionou no Chrome. Commented 25/02/2014 às 17:13
  • Exatamente, testei aqui e nada aconteceu @PauloRoberto
    – Odair
    Commented 25/02/2014 às 17:44
  • @PauloRoberto consegui alguma coisa jsbin.com/kozukizi/2/edit?html,css,js,output
    – Odair
    Commented 25/02/2014 às 17:48
  • ainda não é o que você queria @Odair? Commented 25/02/2014 às 17:51
  • 1
    Atualizei o link na resposta, funcionando no Chrome.
    – Wynn
    Commented 25/02/2014 às 18:33
1

De maneira genérica para fazer uma página de scroll infinito é mais ou menos assim, mas no caso o que você quer é fazer tipo uma paralaxe.

Assim como no exemplo do scroll infinito o que você pode fazer é evitar que eventos sucessivos sejam processados, logo use um 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 */
}
1

Com o código que desenvolvestes aqui que seria:

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

Utilizando a chamada direto no <div> do seu html:

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

Você gostaria de chamar no js para que ela execute no window, por isso deves remover este evento onMouseWheel do html e utilizar o seguinte código:

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

Referência

1
  • 1
    Muito obrigado @PauloRoberto! Funcionou certinho!
    – Odair
    Commented 25/02/2014 às 18:17

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .