Estoy tratando de lograr eso al presionar una tecla, la página se desplaza de acuerdo con el div enfocado, en este momento, la pulsación de tecla se desplaza correctamente a través de los div, pero lo que necesito lograr es que la página se desplace con el elemento enfocado. De momento se queda atrás. Los primeros elementos están bien, pero luego el div enfocado es más bajo de lo que se muestra en la página.
Aquí están los fragmentos de código que estoy usando:
Esto obtiene la pulsación de tecla y funciona correctamente en una página que no necesita desplazarse (menos del contenido de una pantalla):
<script> $('.focused').focus(); $(document).keydown(function(e){ if (e.keyCode == 38) { // left if($('.focused').prev('.focusable').length) $('.focused').removeClass('focused').prev('.focusable').focus().addClass('focused'); } if (e.keyCode == 40) { // right if($('.focused').next('.focusable').length) $('.focused').removeClass('focused').next('.focusable').focus().addClass('focused'); } if (e.keyCode == 8) { window.history.back(); } }); </script> Y estos son los elementos (el primero está configurado como focused , los otros no, la pulsación de tecla los recorre).
<div class="col-lg-4 col-md-6 focusable focused"> <a href="/items" class="listing-item-container compact"> <div class="listing-item"> <img src=items.jpg"> <div class="listing-item-content"> <h3>' . $content . '</h3> </div> </div> </a> </div> <div class="col-lg-4 col-md-6 focusable"> <a href="/items" class="listing-item-container compact"> <div class="listing-item"> <img src=items.jpg"> <div class="listing-item-content"> <h3>' . $content . '</h3> </div> </div> </a> </div>Hay un número (hasta 20) de divs en cada página.
No estoy seguro de cómo hacer que la página se desplace hacia abajo lo suficiente como para mostrar div enfocado.
Cualquier ayuda sería apreciada. Gracias.
¡Puedes usar html!
Elige dónde quieres desplazarte. por ejemplo un div. Agregue una identificación al div.
<div id="exampleId">Use una etiqueta a para desplazar el div. En la sección de etiqueta href, escriba la identificación del div que desea envolver usando #.
<a href="#exampleId">Scroll Me To The Example Div !</a>sí, ahora al hacer clic en este enlace se desplazará al div con id exampleId. Puede dar forma a la etiqueta opcional como un botón.
usar así
const scrolldown = () => { const btn = document.querySelector("#sections"); btn.scrollBy({ left: 200, behavior: "smooth" }); }