What is the better way to know the sum of children’s width?

I have a horizontal div with a random number of children ; this div has a overflow: hidden property so some of the children are hidden and can be visible when we navigate through the div with a click on some specific buttons (basically previous/next buttons).

To force the navigation in the parent div, I’m using .scrollLeft(). So when we press previous, I make something like scrollLeft(actualscrollLeft - parent.outerWidth()), and when we press next, I make something like scrollLeft(actualscrollLeft + parent.outerWidth()). So far so good (I think so actually).

I want to know when we reach the end of the navigation (like that, I can go back to the start of the children elements when we press next).

I’m doing the following to perform this :

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); }

It works great, but I’m wondering if it’s the better way to perform this (in a “performance” way I mean).

Further details :

The total number of the children can’t be known and the number of children displayed at once through the parent div depends of the screen width, everything is calculated with css before. No matter how many children are displayed at once, it always fit the entire parent div.

As an example with 4 children, in a large screen the parent div can display 3 items and the next view displays the last item, and in a small screen the first view displays 2 items and the next one also two.

Answer

You want 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
}