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

Question

我有一个包含N个元素的滑块。 当用户点击下一个按钮时，每个元素将按N个像素平移。 当元素超出包装div时，它会因为被另一个元素溢出而消失。

我的插件不使用任何边距，只使用转换属性。

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

Answer 1

通过确定parent width并获得child width然后使用if condition

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

jsFiddle演示

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

Answer 2

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

使用Jquery，你可以这样做：

<script>
  //This is the position of the right side of the element 
  //relative to his parent
  var rightPos = $("#element").position().left + $("#element").width();
  //And bottom side
  var botPos = $("#element").position().top + $("#element").height();
  if (rightPos > $("#element").parent().width()) {
    //The element is outside the right limit of the the parent block
  } else if (botPos > $("#element").parent.height()) {
    //It's outside the bottom limit of the parent block
  }
</script>

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

Answer 3

您可以为包装器div提供overflow：hidden的CSS属性

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

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

Answer 4

有一个很好的工具可以测试元素在屏幕上是否可见。

检测DOM元素是否真正可见

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