What is the better way to know the sum of children's width?-CodePudding

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.

CodePudding user response：

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
}

CodePudding user response：

So you have a div with a specific view range, and the item inside that overpass that will not show up until you scroll with a button event.

well, your code is fine, few things you can do are to avoid child selection and adding the with the fullsize. to do that you can wrap your items in parent div with x-overflow allowed and then you can get that div width it will be cleaner.

in css to keep the scrollbar not 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 */
}