He intentado lograr la navegación con teclas de flecha en las 4 direcciones. Puedo lograr 2 direcciones left y right usando nextSibling y previousSibling . Pero no encontré ninguna forma de llegar por encima y por debajo de los divs. He visto muchos ejemplos de navegación con teclas de flecha en el diseño de la cuadrícula de la tarjeta, pero no encontré ninguno con un diseño receptivo. Cuando tiene soporte receptivo, la cantidad de tarjetas en cada fila cambia. En nuestro caso, tenemos un solo div con envoltura para crear la cuadrícula. He visto aplicaciones como Google Drive que tienen soporte receptivo y navegación con teclas de flecha. Muestra
Si está seguro de que todas sus tarjetas tienen el mismo ancho, puede optar por el siguiente enfoque:
Puede encontrar el elemento arriba o abajo usando sus coordenadas x e y, que puede obtener usando los métodos Element.getBoundingClientRect() ,window.scrollX ywindow.scrollY .
avanzando con su muestra ,
Agregue un método getRect() a su componente de diseño para obtener las coordenadas x e y.
getRect = (id) => { const el = document.getElementById(id); const rect = el.getBoundingClientRect(); const x = rect.left + window.scrollX; const y = rect.top + window.scrollY; return { el, x, y }; }; Ahora agregue condiciones para las teclas ARROW_UP y ARROW_DOWN al método handleKeyPress()
else if (e.key === NAVIGATION_KEYS.ARROW_UP) { const { x, y } = this.getRect(selected); // loop back in the list and select the first element // that is above the current selected element and has the same x coordinate for (let i = list.indexOf(selected) - 1; i >= 0; i--) { const { el, x: tx, y: ty } = this.getRect(list[i]); if (x === tx && y > ty) { this.setState({ selected: list[i] }); el.scrollIntoView(); // scrolls the element into view, try removing it to see what it does break; } } } else if (e.key === NAVIGATION_KEYS.ARROW_DOWN) { const { x, y } = this.getRect(selected); // loop forward in the list and select the first element // that is below the current selected element and has the same x coordinate for (let i = list.indexOf(selected) + 1; i < list.length; i++) { const { el, x: tx, y: ty } = this.getRect(list[i]); if (x === tx && y < ty) { this.setState({ selected: list[i] }); el.scrollIntoView(); // scrolls the element into view, try removing it to see what it does break; } } }si desea un efecto de desplazamiento suave, puede agregar el siguiente css
html { scroll-behaviour: smooth; }He agregado comentarios para explicación, puedes preguntar si no entiendes algo.
aquí hay un ejemplo de trabajo bifurcado y extendido de su muestra