如何找出一个元素溢出(与jQuery)? [英] How to find out if an element overflows (with jQuery)?
本文介绍了如何找出一个元素溢出(与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屋!
查看全文