如何找出一个元素溢出（与jQuery）？ [英] How to find out if an element overflows (with jQuery)?

问题描述

布局看起来像这样：

基本上我只想知道ELEMENT是否超出了PAGE的范围：）

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

解决方案

计算元素的 width ，然后得到它的 left ，最后将它减去页面的 width 和你会得到溢出。

$ b

var pageWidth = $（.page ）.width（）; var elementWidth = $（。element）。width（）; var elementLeft = $（。element）。position（）。left; if（pageWidth - （elementWidth + elementLeft）< 0）{alert（overflow！）;} else {alert（does not overflow）;}

  .page {overflow：hidden;宽度：200px; height：200px;位置：相对; background：black;}。element {width：100px; height：100px;位置：绝对;背景：蓝色;顶部：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/

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...

解决方案

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/

这篇关于如何找出一个元素溢出（与jQuery）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！