Cuando sostengo/presiono la tecla 'w' en mi teclado, toda la página debería desplazarse hacia arriba. Cuando presiono la tecla 'd', se desplaza hacia abajo. Excepto cuando estoy en un campo de entrada, porque de lo contrario me desplazaría hacia arriba/abajo cuando quiero ingresar letras W/D.
Este sería el código para desplazarse hacia abajo al presionar W. 87 = W en el teclado (el código no funciona correctamente)
document.body.onkeyup = function(e) { var code = e.keyCode; if(code === 87) { window.scrollTo(document.body.scrollLeft, document.body.scrollBottom + 500); } };¿Cómo hago esto? ¿Y hay alguna manera de desplazarse suavemente para que no haga clic en las teclas, puedo sostenerlas?
code funciona correctamente, para desplazarse solo si la entrada no está enfocada, puede verificar inputElement !== document.activeElement . Para desplazarse suavemente hacia arriba, debe hacer esto.
document.body.onkeyup = function(e) { const inputElement = document.getElementById('myinput'); var code = e.keyCode; console.log(code); if(code === 87 && (inputElement !== document.activeElement)) { window.scrollTo(0, 0); console.log('scrolling'); } }; html { scroll-behavior: smooth; } <input id='myinput' ></input>Agregue scroll-behavior: smooth al elemento
<html>para permitir un desplazamiento suave en toda la página (nota: también es posible agregarlo a un elemento específico/contenedor de desplazamiento):
He arreglado el código ahora se desplazará a lo largo del eje Y cuando presione W/D
var scrollY = 0; window.addEventListener("keydown", function(e){ var code = e.keyCode; if(code === 87) { // W scrollY += 20; window.scrollTo(0, scrollY); } if(code === 68) { // D scrollY -= 20; window.scrollTo(0,scrollY); } }); .container{ background-color:red; height:1000px } .container2{ background-color:blue; height:100vh } <div class='container'> test <div> <div class='container2'> test <div>