Question

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

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

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

Answer 1

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

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

<强> jsFiddle Demo

如果您使用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

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

Detect if a DOM Element is Truly Visible

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

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

4 个答案: