知道兒童寬度之和的更好方法是什么？

我有一個具有亂數量的子代的水平 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 個專案，下一個視圖也是 2 個。

uj5u.com熱心網友回復：

你想要 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;
  字體大小: 2rem;
  overflow: scroll;
  cursor: col-resize;
}

/* 在chrome中隱藏滾動條 */。
::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbars in FF */
.row {
  scrollbar-width: none;
}

<div class = "row" > 
  <div class = "cell"/span>> A</div>
  <div class = "cell"/span>> B</div>/span>
  <div class = "cell"/span>> A</div>
  <div class = "cell"/span>> B</div>/span>
  <div class = "cell"/span>> A</div>
  <div class = "cell"/span>> B</div>/span>
  <div class = "cell"/span>> A</div>
  <div class = "cell"/span>> B</div>/span>
  <div class = "cell"/span>> A</div>
  <div class = "cell"/span>> B</div>/span>
  <div class = "cell"/span>> A</div>
  <div class = "cell"/span>> B</div>/span>
  <div class = "cell"/span>> A</div>
  <div class = "cell"/span>> B</div>/span>
  <div class = "cell"/span>> A</div>
  <div class = "cell"/span>> B</div>/span>
  <div class = "cell"/span>> A</div>
  <div class = "cell"/span>> B</div>/span>
  <div class = "cell"/span>> A</div>
  <div class = "cell"/span>> B</div>/span>
  <div class = "cell"/span>> A</div>
  <div class = "cell"/span>> B</div>/span>
</div>/span>

Parent = {
  "x"/span>: 8,
  "y": 8,
  "width": 96,
  "高度": 52,
  "top": 8,
  "right": 104,
  "底部": 60,
  "左": 8.
}

Children = {
  "x": 8,
  "y": 8,
  "width": 488.984375,
  "高度": 37,
  "top": 8,
  "right": 496.984375,
  "底部": 45,
  "左": 8.
}

uj5u.com熱心網友回復：

所以你有一個具有特定視圖范圍的div，而該overpass內的專案將不會顯示出來，直到你用按鈕事件滾動。

好吧，你的代碼很好，你可以做的幾件事是避免兒童選擇和添加全尺寸。要做到這一點，你可以在允許x-overflow的情況下將你的專案包裹在父級div中，然后你可以獲得該div的寬度，這將更干凈。

在css中，保持滾動條不可見

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

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

標籤：

上一篇：縮放etcd是否會影響寫入性能？

下一篇：Linux 常用命令總結（三）