如何使用jQuery判断一个元素是否溢出？

Question

布局大致如下：

我想知道的就是元素是否超出了页面范围 :)

我只知道页面宽度是固定的，为 900 像素……

- Alex

---

这是在元素被拖动时，还是在窗口调整大小、页面加载时需要检查？您是否只有一个要定位的元素（例如拖动事件），还是需要循环遍历页面上的所有元素？需要上下文！ - Chris Baker

不，它是一个<pre>元素，有时可能会有更长的行，它们超出了页面范围。页面上可以有多个这样的元素。 - Alex

Answer 1

计算元素的 width，然后获取它的 left，最后将其减去页面的 width，您就能得到溢出部分。

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/。

- jackJoe

---

@Alex 我刚刚更新了一个例子。这个例子有硬编码的位置和宽度，但是它可以为动态使用提供方向 :) - jackJoe

如果 left: -10px; 怎么办？ - rhitz

Answer 2

假设你的页面上有一些 `

`，你可以按以下方式判断它是否在视口之外：

var $elem = $('#elem'),
    top = $elem.offset().top,
    left = $elem.offset().left,
    width = $elem.width(),
    height = $elem.height();

if (left + width > $(window).width()) {
    alert('Off page to the right');
}

if (top + height > $(window).height()) {
    alert('Off page to the bottom');
}

- FishBasketGordo

---

如果 div 元素被包含在另一个 div 中，那么计算相对于父 div 的偏移量而不是文档的偏移量会更好。使用 offset() 而不是 position() 会是一个更好的选择吗？ - Ehtesham

Answer 3

这里所有的答案都没有检查元素是否位于top: negative value或left: negative value。

所以，我在这里提供一个更正确或精确的答案。

var pageWidth = $(".page").width();
var pageHeight = $(".page").height();
var pageTop = $(".page").offset().top;
var pageLeft = $(".page").offset().left;

var elementWidth = $(".element").width();
var elementHeight = $(".element").height();
var elementTop = $(".element").offset().top;
var elementLeft = $(".element").offset().left;


if ((elementLeft >= pageLeft) && (elementTop >= pageTop) && (elementLeft + elementWidth <= pageLeft + pageWidth) && (elementTop + elementHeight <= pageTop + pageHeight)) {
  // Its inside
  alert('Inside');
} else {
  //
  alert('Outside');
}

.page {
  overflow: hidden;
  width: 200px;
  height: 200px;
  position: relative;
  background: black;
}
.element {
  width: 100px;
  height: 100px;
  position: absolute;
  background: blue;
  top: -10px;
  left: -10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div class="page">
  <div class="element">
  </div>
</div>

检查 Fiddle

- rhitz

Answer 4

你尝试过使用CSS来防止这种情况发生吗？

pre { word-wrap:break-word; }

遍历页面上的每个元素似乎过于冗长，而在繁忙的页面上需要花费一些时间。虽然这是可能的，但并不完全实际。

- Chris Baker

---

我不想这样做，因为我将元素包裹在另一个具有overflow:hidden的元素内，然后在鼠标悬停在该元素上时切换溢出。 - Alex