如何查明元素是否溢出（使用jQuery）？

Question

布局如下所示：

基本上我只想知道ELEMENT是否超出了PAGE :)

我所知道的是页面宽度，固定为@ 900像素...

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/

Answer 2

假设您的页面上有一些<div id="elem"></div> ，您可以判断它是否在视口之外，如下所示：

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');
}

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> 

检查小提琴

Answer 4

您是否尝试过使用CSS来防止它发生？

pre { word-wrap:break-word; }

迭代遍历页面上的每个元素似乎过多，并且在繁忙的页面上需要一些时间。 这是可能的但不完全实用。