Question

我写了一个小example

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

另外，我无法理解我推断出例如项目[10]留下了容器可见区域的信息。

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

Answer 1

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

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

但是，如果你需要密切跟踪元素，我强烈建议使用Javascript在页面周围操作它们而不是CSS，它在浏览器中更快，更容易和更均匀。

使用CSS更改DOM的状态并尝试用javascript捕获它是一种反模式，除非编写等效的javascipt会非常困难。

Answer 2

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

如果您提供所有元素box-sizing: border-box，那么将使用边框计算高度，您的示例将起作用：

div {
    box-sizing: border-box;
}

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

2 个答案: