Adicionando evento Mouse Wheel em javascript

Mouse Wheel (esse botão de scroll no meio do mouse) pode ser manipulado via javascript. Script interessantes de zoom podem ser feitos com mouse wheel, como este e este , ambos do dhteumeuleu.

mouse-wheel

Cada browser interpreta o evento de uma maneira, mas existe uma função que acredito ter sido feita pelo site adomas.org que é cross-browser igualando todas as diferenças entre os browsers:

function handle(delta) {
	if (delta < 0){
		/* EVENTO COM O MOUSE WHEEL DESCENDO */
		alert('descendo');
	} else {
		/* EVENTO COM O MOUSE WHEEL DESCENDO */
		alert('subindo');
	}
}
function wheel(event){var delta=0;if(!event)event=window.event;if(event.wheelDelta){delta=event.wheelDelta/120;if(window.opera)delta=-delta;}else if(event.detail){delta=-event.detail/3;}if(delta)handle(delta);if(event.preventDefault)event.preventDefault();event.returnValue=false;}if(window.addEventListener)window.addEventListener('DOMMouseScroll',wheel,false);window.onmousewheel=document.onmousewheel=wheel;

Basta colocar seu código na linha 4 e 7 substituindo o alert.

Vejam um exemplo bem simples que fiz mostrando o evento, quando eu tiver tempo livre eu faço algo mais interessante.

Você pode se interessar também por:

5 Responses to “Adicionando evento Mouse Wheel em javascript”

  1. 1
    Leko Says:

    Gostei bastante.. boa danilo, flw boa semana guri.

  2. 2
    Chris Benseler Says:

    O Google Maps foi a primeira aplicação web que eu me lembre que usou o scroll do mouse; é muito bom, aumenta em muito a experiência do usuário!
    Bacana!

  3. 3
    Eduardo Ottaviani Says:

    Legal véi, eu não sabia que dava pra capturar esse evento em Javascript.

    Show.

  4. 4
    Zoom de Imagem em Javascript e jQuery - Passos 5 e 6 | TidBits Says:

    [...] o zoom, se você não sabe trabalhar com isso, dê uma olhada num post antigo meu que mostrar como adicionar um evento ao mouse wheel . Esse script deixei num arquivo a parte (pq senão atrapalharia o scroll aqui), então veja o [...]

  5. 5
    Jogo Pong em Javascript - Passo a passo | TidBits Says:

    [...] da raquete, no passo 12, foi implementado o controle por mouse wheel, baseado naquela função de mouse wheel postada aqui a pouco tempo [...]

Leave a Reply