"lier" j vers le bas (flèche) pour faire défiler le document

Question

Je voudrais fondamentalement donner le comportement de la flèche vers le bas à la clé j, de sorte qu'il fait défiler le document.

Voici ce que je l'ai fait:

document.addEventListener("DOMContentLoaded", function() { 
    document.body.addEventListener("keydown", e => { 
    console.log(e.key, e.code, e.which); 
    }); 

    const event = new KeyboardEvent("keydown", { 
    key: "ArrowDown", 
    bubbles: true, 
    code: 40, 
    isTrusted: true, 
    which: 40, 
    charCode: 40, 
    isComposing: true 
    }); 
    document.body.dispatchEvent(event); 
}); 

Ainsi, il déclenche l'auditeur, mais ne défile pas le document. C'est vraiment bizarre parce que quand j'appuie sur la flèche vers le bas, l'écouteur est aussi déclenché.

Answer 1

La méthode dispatchEvent(event) appellera EventListeners que vous liez sur le Dom. Mais elle ne déclenchera pas le comportement par défaut du navigateur.

Bien que vous puissiez déclencher l'événement keydown par Javascript, cela ne signifie pas que vous pouvez simuler en appuyant sur n'importe quelle touche du clavier.

Je pense que pour une raison sûre, il n'y a plus moyen de contrôler le clavier de l'utilisateur via Javascript pur (peut-être que certains plugins de navigateur peuvent le faire).

Donc, si vous voulez vraiment faire défiler le document lorsque la presse j, je pense que vous pouvez essayer cette

document.body.addEventListener("keydown", e => { 
    console.log(e.key, e.code, e.which); 
    if (e.which === 74) {// 'key j' 
     for (var i = 0; i < 20; i++) {// scroll down smoothly 
     setTimeout(function() { 
      document.body.scrollTop += 1; 
     }, 10*i); 
     } 
    } 
    }); 

espère que cela peut vous aider.