web-dev-qa-db-fra.com

Comment empêcher le défilement avec les touches fléchées mais PAS avec la souris?

Puisque j'utilise jQuery, toute solution via qui fonctionnerait aussi. Idéalement, j'aimerais cependant connaître les deux.

J'ai déjà les touches fléchées liées à une autre fonction sur ma page (en utilisant jQuery), mais les avoir fait défiler la page en plus de cela, me pose des problèmes.

Je l'ai peut-être su à un moment donné, mais je ne m'en souviens plus.

javascriptjqueryscrollarrow-keys
34
Daddy Warbox

L'ajout d'un gestionnaire de touches au niveau du document fait l'affaire!

var ar=new Array(33,34,35,36,37,38,39,40);

$(document).keydown(function(e) {
     var key = e.which;
      //console.log(key);
      //if(key==35 || key == 36 || key == 37 || key == 39)
      if($.inArray(key,ar) > -1) {
          e.preventDefault();
          return false;
      }
      return true;
});
79
TheVillageIdiot

Dans certaines circonstances, par exemple. lorsque vous n'avez pas vraiment d'élément sur lequel vous vous concentrez, juste une zone sur laquelle vous avez dû cliquer, vous pourriez ne pas avoir trop de contrôle sur le gestionnaire et empêcher l'événement au niveau global peut être un peu flou au mieux (comme je l'ai trouvé à la dure).

La solution la plus simple dans ces cas est de lier le clic même du bouton de commande et de se concentrer sur un élément d'entrée vide que vous positionnez -9000px à gauche.

Vous pouvez ensuite bloquer de manière fiable l'événement via keydown et ne pas avoir à vous soucier du blocage du comportement par défaut ou d'autres écouteurs globaux car le comportement par défaut sur l'élément d'entrée ne fera que déplacer le curseur vers la gauche et la droite.

2
srcspider

Si vous ajoutez un gestionnaire de pression de touche au niveau du document, cela empêchera le défilement normal de la page à tout moment, non seulement lorsque votre élément est mis en évidence, cela pourrait être un effet indésirable.

1
JVitela