如何查明元素是否溢出（使用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; }

迭代遍歷頁面上的每個元素似乎過多，並且在繁忙的頁面上需要一些時間。 這是可能的但不完全實用。