javascript 如何找出元素是否溢出（使用 jQuery）？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6866293/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to find out if an element overflows (with jQuery)?
提问by Alex
The layout looks like this:
布局如下所示：
Basically all I want is to find out if the ELEMENT went outside the PAGE :)
基本上我想要的就是找出 ELEMENT 是否超出了 PAGE :)
All I know is the page width, which is fixed @ 900 px...
我所知道的是页面宽度，它是固定的@ 900 px ...
采纳答案by HymanJoe
Calculate the element's width, then get its left, finally subtract it to the page's widthand you'll get the overflow.
计算元素的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>Example here: http://jsfiddle.net/HymanJoe/Q5FdG/
回答by FishBasketGordo
Assuming you have some <div id="elem"></div>on your page, you could tell if it is outside of the viewport like this:
假设您<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');
}
回答by rhitz
All the answers here have not checked if element is at top: negative valueor left: negative value.
这里的所有答案都没有检查元素是否在top: negative value或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>回答by Chris Baker
Have you tried using CSS to prevent it from happening?
您是否尝试过使用 CSS 来防止它发生？
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.
遍历页面上的每个元素似乎过多，而且在繁忙的页面上需要一些时间。这是可能的，但并不完全实用。
