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

Question

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

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

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

Answer 1

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

使用 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()。