javascript - 如何找出元素是否溢出(使用 jQuery)？

Question

布局看起来像这样:

基本上我想要的只是找出 ELEMENT 是否超出了 PAGE :)

我只知道页面宽度，固定为 900 像素...

Answer 1

计算元素的宽度，然后得到它的左边，最后将它减去页面的宽度，你就会得到溢出。

var pageWidth = $(".page").width();
var elementWidth = $(".element").width();
var elementLeft = $(".element").position().left;

if (pageWidth - (elementWidth + elementLeft) < 0) {
  alert("overflow!");
} else {
  alert("doesn't overflow");
}

.page {
  overflow: hidden;
  width: 200px;
  height: 200px;
  position: relative;
  background: black;
}

.element {
  width: 100px;
  height: 100px;
  position: absolute;
  background: blue;
  top: 10px;
  left: 150px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="page">
  <div class="element">
  </div>
</div>

此处示例:http://jsfiddle.net/jackJoe/Q5FdG/