Neste artigo você vai aprender a como desabilitar o scroll botão do do mouse com JavaScript de uma maneira super simples e eficaz
Conteúdo também disponível em vídeo:
Fala programador(a), beleza? Bora aprender mais sobre scroll, DOM e JavaScript!
Para desabilitar o botão do scroll vamos mapear um evento de onmousedown
Este evento serve para verificar quando um botão do mouse é pressionado
O código do botão do scroll é 1, então vamos identificar o código um e fazer o bloqueio da ação
Utilizando um argumento de evento, que é fornecido em todos os eventos de JS
Vamos retornar false, quando acontecer o evento que não desejamos
Veja o código com a situação resolvida:
document.body.onmousedown = function(e){
if(e.button == 1) {
return false;
}
}Este código acima remove a ação do botão do meio ou botão do scroll com JavaScript
Você pode inserir um console.log dentro do if e verificar a mensagem sendo exibida caso o botão for pressionado
Outra alternativa com JS puro é:
document.addEventListener("mousedown", function(e) {
if(e.button === 1) {
return false;
}
});Podemos realizar esta ação com jQuery também, veja:
$('body').mousedown(function(e){
if(e.button==1){
alert('Botão desabilitado');
return false
}
});Neste código removemos o efeito do botão central com jQuery
Lembrando que os códigos do mouse são:
- 0: botão esquerdo
- 1: botão do meio ou de scroll
- 2: botão direito
Conclusão
Neste artigo você viu como desabilitar o scroll botão do do mouse com JavaScript
Podemos utilizar o evento onmousedown, que verifica as ações com mouse
E então bloqueamos o evento do botão 1, que é o do centro
Porém você também pode trabalhar com os outros eventos, utilizando 0 para o botão esquerdo e 2 para o botão direito
Aí é só adicionar a lógica correta para a sua regra de negócio
Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube