如何动态获取不适合父项的项目数量？答案

【问题标题】：How do I get the number of items that will not fit inside the parent dynamically?如何动态获取不适合父项的项目数量？
【发布时间】：2021-11-02 11:28:06
【问题描述】：

我目前有一个带有一些孩子的可拖动宽度容器。

因为它的宽度是可拖动的，一旦宽度足够小，例如只能容纳 3 个元素。预期输出为 (0)、(1) 和 (+4)（溢出的元素数 + 1）。

其他情况：这里只有两个元素适合，4 个溢出。预期的输出是带有 (0) 和 (+5) 的两个圆圈。

我看到其他帖子，他们使用固定宽度并计算可以容纳的元素数量。但是，在我的用例中，宽度是变化的，我需要获取可以动态适应/溢出的元素数量。如何使用 javascript 和纯 CSS 来做到这一点？

【问题讨论】：

"这可以使用 react、javascript 和纯 css 完成吗？" - 你问的问题真的与 React 没有任何关系。
只需使用getBoundingClientRect 来获取容器的实际大小（或者可能是window.getComputedStyle）：stackoverflow.com/questions/13435604/…

标签： javascript html css reactjs

【解决方案1】：

var popupDiv = document.getElementsById("container")
let count = Math.round(window.getComputedStyle(popupDiv).width/widthOFElement)

我希望这会有所帮助。这里的 widthOFElement 是圆形元素的宽度。您可以将其添加到可拖动事件侦听器中。

【讨论】：