知道儿童宽度总和的更好方法是什么？

Question

我有一个带有随机数量子级的水平 div；这个 div 有一个 overflow: hidden 属性，所以当我们通过点击某些特定按钮（基本上是上一个/下一个按钮）在 div 中导航时，一些子项被隐藏并且可以看到。

为了在父 div 中强制导航，我使用了.scrollLeft()。所以当我们按下 previous 时，我会制作类似 scrollLeft(actualscrollLeft - parent.outerWidth()) 的内容，而当我们按下 next 时，我会制作类似 scrollLeft(actualscrollLeft + parent.outerWidth()) 的内容。到目前为止一切顺利（实际上我认为如此）。

我想知道我们何时到达导航的末尾（这样，当我们按下 next 时，我可以回到子元素的开头）。

我正在执行以下操作：

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

效果很好，但我想知道这是否是执行此操作的更好方式（我的意思是“性能”方式）。

更多细节：

孩子的总数不知道，通过父div一次显示的孩子的数量取决于屏幕宽度，一切都是之前用css计算的。 无论一次显示多少个子元素，它总是适合整个父 div。

以有 4 个子项为例，在大屏幕中，父 div 可以显示 3 个项目，下一个视图显示最后一个项目，而在小屏幕中，第一个视图显示 2 个项目，下一个也显示两个项目。

Answer 1

因此，您有一个具有特定视图范围的 div，并且该立交桥内的项目在您使用按钮事件滚动之前不会显示。

好吧，您的代码很好，您可以做的几件事是避免选择子项并添加全尺寸。为此，您可以将您的项目包装在允许 x-overflow 的父 div 中，然后您可以获得该 div 宽度，它会更干净。

在css中保持滚动条不可见

.wrapper::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.wrapper {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

Answer 2

你想要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
}