Tengo un div horizontal con un número aleatorio de hijos; este div tiene un overflow: hidden , por lo que algunos de los elementos secundarios están ocultos y pueden verse cuando navegamos por el div con un clic en algunos botones específicos (básicamente, los botones anterior/siguiente).
Para forzar la navegación en el div principal, estoy usando .scrollLeft() . Así que cuando presionamos anterior , hago algo como scrollLeft(actualscrollLeft - parent.outerWidth()) , y cuando presionamos next , hago algo como scrollLeft(actualscrollLeft + parent.outerWidth()) . Hasta ahora todo bien (creo que sí).
Quiero saber cuándo llegamos al final de la navegación (así, puedo volver al inicio de los elementos secundarios cuando presionamos siguiente ).
Estoy haciendo lo siguiente para realizar esto:
var list_width = jQlist.outerWidth(), actualScroll = jQlist.scrollLeft(), fullsize = 0, jQitems = jQuery(jQlist.find('.item')); for(var i = 0; i < jQitems.length; i++) { fullsize = fullsize + jQuery(jQitems[i]).outerWidth(); } if(actualScroll + list_width >= fullsize) { jQlist.scrollLeft(0); } else { jQlist.scrollLeft(actualScroll + list_width); }Funciona muy bien, pero me pregunto si es la mejor manera de realizar esto (me refiero a una forma de "rendimiento").
Más detalles :
No se puede saber el número total de niños y el número de niños que se muestran a la vez a través del div principal depende del ancho de la pantalla, todo se calcula con css antes. No importa cuántos elementos secundarios se muestren a la vez, siempre se ajusta a la división principal completa.
Como ejemplo con 4 hijos, en una pantalla grande, el div principal puede mostrar 3 elementos y la siguiente vista muestra el último elemento, y en una pantalla pequeña, la primera vista muestra 2 elementos y la siguiente también dos.
Quiere Document.createRange & Range.getBoundingClientRect() :
let range = document.createRange(); const row = document.querySelector('.row'); range.setStart(row.firstChild, 0); range.setEnd(row.lastChild, row.lastChild.childNodes.length); console.log('Parent = ', row.getBoundingClientRect()); console.log('Children = ', range.getBoundingClientRect()); .row { display: flex; max-width: 3em; font-size: 2rem; overflow: scroll; cursor: col-resize; } /* Hide scrollbars in chrome */ ::-webkit-scrollbar { display: none; } /* Hide scrollbars in FF */ .row { scrollbar-width: none; } <div class = "row"> <div class = "cell">A</div> <div class = "cell">B</div> <div class = "cell">A</div> <div class = "cell">B</div> <div class = "cell">A</div> <div class = "cell">B</div> <div class = "cell">A</div> <div class = "cell">B</div> <div class = "cell">A</div> <div class = "cell">B</div> <div class = "cell">A</div> <div class = "cell">B</div> <div class = "cell">A</div> <div class = "cell">B</div> <div class = "cell">A</div> <div class = "cell">B</div> <div class = "cell">A</div> <div class = "cell">B</div> <div class = "cell">A</div> <div class = "cell">B</div> <div class = "cell">A</div> <div class = "cell">B</div> </div> Parent = { "x": 8, "y": 8, "width": 96, "height": 52, "top": 8, "right": 104, "bottom": 60, "left": 8 } Children = { "x": 8, "y": 8, "width": 488.984375, "height": 37, "top": 8, "right": 496.984375, "bottom": 45, "left": 8 }Entonces, tiene un div con un rango de vista específico y el elemento dentro de ese paso elevado que no aparecerá hasta que se desplace con un evento de botón.
bueno, su código está bien, algunas cosas que puede hacer son evitar la selección de niños y agregar el tamaño completo. para hacer eso, puede envolver sus elementos en div principal con x-overflow permitido y luego puede obtener ese ancho de div, será más limpio.
en css para mantener la barra de desplazamiento no visible
.wrapper::-webkit-scrollbar { display: none; } /* Hide scrollbar for IE, Edge and Firefox */ .wrapper { -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ }