0
374
Views¿Cómo mostrar un elemento más desde la parte superior o inferior del área visible con scrollIntoView ()?
Quiero mostrar dos elementos cuando uso scrollIntoView() con botones de navegación (arriba y abajo) para que el usuario sepa que hay elementos para navegar, pero el primero y el último deben tener un comportamiento predeterminado, para que el usuario sepa que es el final de la lista .
Espero que esta imagen te ayude: 
aquí está mi código:
*{ margin: 0; padding: 0; box-sizing: border-box; font-family: sans-serif; } .myList{ width: 100px; height: 100px; margin: 5px; overflow: scroll; display: flex; flex-direction: column; background-color: gray; list-style: none; } button{ width: 40px; margin: 0 5px; } .myList>*{ display: block; padding: 5px; } .focused{ background-color: yellow; color: black; } <html> <body> <ul class="myList"> <li data-nav="0">Item 1</li> <li data-nav="1">Item 2</li> <li data-nav="2">Item 3</li> <li data-nav="3">Item 4</li> <li data-nav="4">Item 5</li> <li data-nav="5">Item 6</li> <li data-nav="6">Item 7</li> </ul> <button onclick="move(true)">UP</button> <button onclick="move(false)">down</button> <script> let nav = document.querySelectorAll("[data-nav]"); nav.forEach(el=>{ el.classList.remove("focused"); }) nav[0].classList.add("focused"); let focusedIndex = 0; function move(dir){ if(dir && focusedIndex > 0) focusedIndex--; else if(!dir && focusedIndex < 6) focusedIndex++; nav.forEach(elem =>{ elem.classList.remove("focused"); }) nav[focusedIndex].classList.add("focused"); nav[focusedIndex].scrollIntoView(true); } </script> </body> </html>
·
Juan Pablo Isaza
1 answers
Answer question0
Primero necesitas cuando aparece el elemento anterior
- si hacemos clic en el botón arriba y el índice actual no es el primer elemento , en esta estatua debemos desplazarnos al elemento anterior y agregar la clase enfocada al elemento actual
let nav = document.querySelectorAll("[data-nav]"); nav.forEach((el) => { el.classList.remove("focused"); }); nav[0].classList.add("focused"); let focusedIndex = 0; function move(dir) { if (dir && focusedIndex > 0) focusedIndex--; else if (!dir && focusedIndex < 6) focusedIndex++; nav.forEach((elem) => { elem.classList.remove("focused"); }); /* check if we click in up button and will not arrive to last one [1] add foucs to current index [2] scroll to prev current index */ if(dir && nav[focusedIndex].dataset.nav != 0) { nav[focusedIndex].classList.add("focused"); nav[focusedIndex-1].scrollIntoView(true); } /* if we click in down button dont do any thing differnt because we already can see another items or the first condition return flase because this already the first element */ else { nav[focusedIndex].classList.add("focused"); nav[focusedIndex].scrollIntoView(true); } }
·
Juan Pablo Isaza
Report
Answer question