我如何知道某个特定物品是否已离开容器？答案

【问题标题】：How do I know if a particular item has left the container?我如何知道某个特定物品是否已离开容器？
【发布时间】：2017-05-03 09:35:51
【问题描述】：

我写了一个小example

$('#block_container').addClass('animate');
var el = $('.block__el');
var height = el.height();
var allHeight = height * el.length;
$(".animate").css('transform', 'translateY(-'+ allHeight +'px)')

我也无法理解如何推断例如 item[10] 离开容器可见区域的消息。

我尝试通过offsettop，但这不是正确的方法

【问题讨论】：

通过比较元素的位置？
How do I get the position of an element after css3 translation in JavaScript?的可能重复

标签： javascript css transform

【解决方案1】：

这篇文章或多或少地回答了这个问题（在 CSS 中使用 translateAxis 时获取元素位置）：

How do I get the position of an element after css3 translation in JavaScript?

但是，如果您需要密切跟踪元素，我强烈建议您使用 Javascript 在页面周围而不是 CSS 来操作它们，因为它更快、更容易并且跨浏览器更加同质。

使用 CSS 更改 DOM 的状态并尝试使用 javascript 捕捉它有点反模式，除非编写等效的 javascipt 真的很难。

【讨论】：

【解决方案2】：

在您的计算中，您必须计算边界。每个项目都有一个宽度为 1px 的边框，因此每个项目都比 height 属性多 2px。

如果你给所有元素box-sizing: border-box，那么高度将用边框计算，你的例子就可以了：

div {
    box-sizing: border-box;
}

【讨论】：