Tengo el siguiente escenario: tengo una API que devuelve varios div. Y en mi interfaz de usuario, tengo un div principal en el que necesito mostrar estos div. La condición es que, si el elemento div secundario está desbordado, debo mostrarlo en la página siguiente.
Por ejemplo: digamos que mi API está devolviendo una cadena como esta:
<div class="ab0"></div> <div class="ab1"></div> <div class="ab2"></div> <div class="ab3"></div> <div class="ab4"></div>y el div principal solo puede caber en ab0, ab1, ab2. Luego, quiero mostrar el primero de estos 3 div y cuando el usuario haga clic en el símbolo '>', necesito mostrar ab3, ab4. Además, si ab2 se desborda parcialmente y si puedo mostrar solo la parte desbordada en la página siguiente, será genial.
¿Hay alguna manera de que pueda hacer esto?
Gracias por adelantado
Una sugerencia simple es utilizar la función de desplazamiento del sistema.
El sistema 'sabe' cuánto puede mostrar a la vez y, siempre que pueda averiguar la altura del div principal, puede mover hacia arriba y hacia abajo a los elementos secundarios (o dividir a los elementos secundarios si un número exacto no encaja en el elemento principal en una vez) usando Javascript scrollTop.
const parent = document.querySelector('.parent'); const h = parent.offsetHeight; let page = 0; const lastPage = Math.floor((parent.scrollHeight + 1) / h); function next() { if (page < lastPage) { page++; parent.scrollTop = parent.scrollTop + h; } } function prev() { if (page > 0) { page--; parent.scrollTop = parent.scrollTop - h; } } .parent { height: 64px; overflow: auto; } .parent div { height: 2em; border: 1px solid; position: relative; } button { font-size: 2em; } <div class="parent"> <div class="ab0">0</div> <div class="ab1">1</div> <div class="ab2">2</div> <div class="ab3">3</div> <div class="ab4">4</div> </div> <button onclick="prev();"><</button> <button onclick="next();">></button> </button>