He creado un componente de tabla con una lista de elementos. Al definir las teclas de acceso rápido con el paquete de teclas de acceso directo de reacción, puedo navegar por la lista con las teclas de 'flecha hacia arriba' y 'flecha hacia abajo'. Sin embargo, tengo una barra de desplazamiento en el lado derecho de la pantalla. Cada vez que uso las teclas de acceso rápido, la pantalla se desplazará al mismo tiempo. ¿Cómo puedo navegar por los elementos con la tecla de acceso rápido sin activar la barra de desplazamiento a menos que el elemento esté fuera de la pantalla actual?
Puede evitar fácilmente el comportamiento de desplazamiento predeterminado del navegador en el evento keydown cuando la tecla es flecha arriba o flecha abajo. Esta publicación explica cómo hacer esto.
Para sus necesidades específicas de deshabilitarlo / habilitarlo, ya sea que la tabla esté en la ventana gráfica o no, puede verificar si está en el evento.
const table = document.querySelector('#table-id') window.addEventListener("keydown", function(e) { if(["Space","ArrowUp","ArrowDown","ArrowLeft","ArrowRight"].indexOf(e.code) > -1) { const y = table.getBoundingClientRect().y if (y > 0 && y < window.innerHeight) { // Table is in viewport. e.preventDefault(); } } }, false);