Esto debería ser posible con vue.js y/o algo de JavaScript . Si desea vincular estas acciones a algunos elementos html , debe echar un vistazo a KeyCode Modifiers , donde tiene la opción de vincularlos en v-on . Si solo desea usar JavaScript sin vincular las acciones a vue.js , podría ser algo como esto:

 document.onkeydown = keyDownFunc; function keyDownFunc(e) { e = e || window.event; if (e.keyCode == '40') { // do something } }

En este caso, 40 es arrow down . Para obtener sus códigos clave, simplemente visite: keycode.info .

Esto es posible con javascript puro, por lo tanto, también es posible con vue

Echa un vistazo a este ejemplo

Primero, presta atención a este método:

 scrollView(amount) { let scrollFromTop = window.pageYOffset; const viewHeight = Math.round(window.innerHeight * Math.abs(amount)); if (scrollFromTop % viewHeight === 0) scrollFromTop += Math.sign(amount); let targetPos; if (amount > 0) targetPos = Math.ceil(scrollFromTop / viewHeight) * viewHeight; else targetPos = Math.floor(scrollFromTop / viewHeight) * viewHeight; window.scrollTo({ top: targetPos, behavior: "smooth" }); }

Determina la altura de la vista y el desplazamiento actual desde arriba. Luego, desplaza la página hacia arriba o hacia abajo según la cantidad proporcionada y en relación con el tamaño de la vista.

NB: el desplazamiento suave aún no es compatible con algunos navegadores, debe usar smoothscroll-polyfill , si decide implementar esta solución.

A continuación, eche un vistazo a este par de ganchos responsables de la escucha de eventos clave:

 mounted() { window.addEventListener("keydown", this.keyHandler); }, beforeUnmount() { window.removeEventListener("keydown", this.keyHandler); }

Y por último, pero no menos importante, la lógica de manejo de eventos:

 keyHandler(e) { if (e.key === 'ArrowDown') { e.preventDefault(); this.scrollView(this.scrollAmount); } if (e.key === 'ArrowUp') { e.preventDefault(); this.scrollView(this.scrollAmount * -1); } },