javascript - How to find out if an element overflows (with jQuery)? - Stack Overflow

admin管理员组

文章数量:1194125

The layout looks like this:

Basically all I want is to find out if the ELEMENT went outside the PAGE :)

All I know is the page width, which is fixed @ 900 px...

The layout looks like this:

Basically all I want is to find out if the ELEMENT went outside the PAGE :)

All I know is the page width, which is fixed @ 900 px...

• javascript
• jquery
• html
• css
• overflow

Share Improve this question Follow edited Jul 28, 2017 at 10:43 Titouan de Bailleul 12.9k1111 gold badges6969 silver badges122122 bronze badges asked Jul 28, 2011 at 21:58 AlexAlex 68.4k185185 gold badges459459 silver badges650650 bronze badges 2

• Is this when an element is the subject of dragging, or on window resize, on page load... when do you need to check for this? Will you have a single element to target (such as a drag event), or will you need to loop through all elements on the page? Need context! – Chris Baker Commented Jul 28, 2011 at 22:01
• no, it's a <pre> element which sometimes can have longer lines, and they go beyond the page. There can be multiple elements on the page – Alex Commented Jul 28, 2011 at 22:02

Add a comment  | 

4 Answers 4

Sorted by: Reset to default 13

Calculate the element's width, then get its left, finally subtract it to the page's width and you'll get the overflow.

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>

Example here: http://jsfiddle.net/jackJoe/Q5FdG/

Assuming you have some <div id="elem"></div> on your page, you could tell if it is outside of the viewport like this:

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

Have you tried using CSS to prevent it from happening?

pre { word-wrap:break-word; }

To iterate through every element on the page seems excessive, and it will take some time on a busy page. It is possible but not entirely practical.

All the answers here have not checked if element is at top: negative value or left: negative value.

So that's why, I am giving a more correct or precise answer here.

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>

Check Fiddle

本文标签： javascriptHow to find out if an element overflows (with jQuery)Stack Overflow