Javascript 如何知道我的元素是否溢出

我有一个包含N个元素的滑块。当用户单击“下一步”按钮时，每个元素将转换为N个像素。当元素超出包装器div时，它将消失，因为它被另一个元素溢出

我的插件不使用任何边距，只使用transform属性

---

我想知道是否有办法知道我的元素是否在div之外：visible对我的问题不起作用，因为元素已经可见，但是溢出了。

您可以给包装器div指定CSS属性overflow:hidden

这意味着当它们离开包装器的边界时，其中的任何元素都不可见

---

否则，您可以使用jQuery检查元素是否在包装器div之外，以将位置与父元素的位置进行比较。

通过确定父元素的宽度，获取子元素的宽度，然后使用if条件

if($('span').width() > divWidth){
alert('Overflowed!');
// do something!
}

---

如果你用你的

html

更新你的问题，那么我可以用你的代码更新。

如果我理解正确，一种方法是将此元素的位置与其父元素的大小（宽度/高度或两者）进行比较

使用Jquery，您可以这样做：

//这是元素右侧的位置
//相对于他的父母
var rightPos=$（“#元素”）.position（）.left+$（“#元素”）.width（）；
//和底部
var botPos=$（“#元素”）.position（）.top+$（“#元素”）.height（）；
if（rightPos>$（“#元素”）.parent（）.width（）{
//该元素位于父块的右侧限制之外
}else if（botPos>$（“#元素”）.parent.height（）{
//它超出父块的底部限制
}

---

如果不是父级，则可以修改此代码以将位置与正确div的宽度进行比较，最好使用jquery offset（）方法而不是position（）

有一个很好的工具，用于测试屏幕上是否可以看到某个元素

---

它查看一个对象并检查它的每一个父对象，以查看它是否仍然对用户可见。

您可以显示小提琴或演示吗？您可以检查添加到隐藏元素中的类（如果有），然后以这种方式将其作为目标。不幸的是，没有任何类添加到隐藏元素中。这是Flickity插件的唯一问题。是的，包装器包含属性。但是我需要知道一个元素是否被包装器溢出，以便对其进行一些处理。编辑：我会试试这个，谢谢。我不确定这是否适用于使用“平移X”移动元素的滑块。