javascript css检查是否溢出
简单的方法来检测元素是否溢出？
我的用例是，我想限制某个内容框有一个300px的高度。 如果内容比这更高，我把它切掉，溢出。 但是，如果它溢出，我想显示一个“更多”button，但如果不是，我不想显示该button。
有没有一种简单的方法来检测溢出，还是有更好的方法？ 谢谢。
如果DOM元素溢出，该函数将返回布尔值：
function isOverflown(element) { return element.scrollHeight > element.clientHeight || element.scrollWidth > element.clientWidth; } 该元素可能会垂直或水平溢出或两者
如果你只想显示更多内容的标识符，那么你可以用纯CSS做到这一点。 我为此使用纯滚动阴影。 诀窍是使用background-attachment: local; 。 你的CSS看起来像这样：
.scrollbox { overflow: auto; width: 200px; max-height: 200px; margin: 50px auto; background: /* Shadow covers */ linear-gradient(white 30%, rgba(255,255,255,0)), linear-gradient(rgba(255,255,255,0), white 70%) 0 100%, /* Shadows */ radial-gradient(50% 0, farthest-side, rgba(0,0,0,.2), rgba(0,0,0,0)), radial-gradient(50% 100%,farthest-side, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%; background: /* Shadow covers */ linear-gradient(white 30%, rgba(255,255,255,0)), linear-gradient(rgba(255,255,255,0), white 70%) 0 100%, /* Shadows */ radial-gradient(farthest-side at 50% 0, rgba(0,0,0,.2), rgba(0,0,0,0)), radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%; background-repeat: no-repeat; background-color: white; background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px; /* Opera doesn't support this in the shorthand */ background-attachment: local, local, scroll, scroll; }
该代码和一个例子，你可以在http://dabblet.com/gist/2462915find
你可以在这里find一个解释： http : //lea.verou.me/2012/04/background-attachment-local/ 。
会是这样的： http : //jsfiddle.net/Skooljester/jWRRA/1/工作？ 它只是检查内容的高度，并将其与容器的高度进行比较。 如果它大于你可以在代码中添加一个“显示更多”button。
更新：添加了在容器顶部创build“显示更多”button的代码。
如果你正在使用jQuery，你可能会试试一下：让外部div与overflow: hidden和内部div的内容。 然后使用.height()函数检查内部div的高度是否大于外部div的高度。 我不确定它会工作，但试试看。
比较element.scrollHeight到element.clientHeight应该完成这个任务。
你应该考虑的另一个问题是JS不可用性。 想想渐进的魅力或优雅的退化。 我会build议：
- 默认添加“更多button”
- 默认添加溢出规则
- 隐藏button，如果有必要，在比较element.scrollHeight到element.clientHeight之后，在JS中进行CSS修改
这里是一个确定一个元素是否溢出的小提琴使用包含溢出的包装div：隐藏和JQuery的高度（）来衡量包装和内部的内部div之间的差异。
outers.each(function () { var inner_h = $(this).find('.inner').height(); console.log(inner_h); var outer_h = $(this).height(); console.log(outer_h); var overflowed = (inner_h > outer_h) ? true : false; console.log("overflowed = ", overflowed); });
来源： jsfiddle.net上的框架和扩展
使用js来检查孩子的offsetHeight是否超过了父母..如果是，使父母溢出scroll/hidden/auto无论你想要的，还display:block更多的div ..
您可以检查相对于偏移父级的边界。
// Position of left edge relative to frame left courtesy // http://www.quirksmode.org/js/findpos.html function absleft(el) { var x = 0; for (; el; el = el.offsetParent) { x += el.offsetLeft; } return x; } // Position of top edge relative to top of frame. function abstop(el) { var y = 0; for (; el; el = el.offsetParent) { y += el.offsetTop; } return y; } // True iff el's bounding rectangle includes a non-zero area // the container's bounding rectangle. function overflows(el, opt_container) { var cont = opt_container || el.offsetParent; var left = absleft(el), right = left + el.offsetWidth, top = abstop(el), bottom = top + el.offsetHeight; var cleft = absleft(cont), cright = cleft + cont.offsetWidth, ctop = abstop(cont), cbottom = ctop + cont.offsetHeight; return left < cleft || top < ctop || right > cright || bottom > cbottom; }
如果你传递这个元素，它会告诉你它的边界是否完全在一个容器内，如果没有提供明确的容器，它将默认为元素的偏移父对象。 它用
setTimeout(function(){ isOverflowed(element) },500) function isOverflowed(element){ return element.scrollHeight > element.clientHeight || element.scrollWidth > element.clientWidth; }
这为我工作。 谢谢。
这是为我工作的jQuery解决scheme。 clientWidth等没有工作。
function is_overflowing(element, extra_width) { return element.position().left + element.width() + extra_width > element.parent().width(); }
如果这不起作用，请确保元素的父级具有所需的宽度（个人而言，我必须使用parent().parent()) 。 position相对于父母。 我还包括extra_width因为我的元素（“标签”）包含的图像需要很短的时间来加载，但在函数调用时，他们有零宽度，破坏计算。 为了解决这个问题，我使用下面的调用代码：
var extra_width = 0; $(".tag:visible").each(function() { if (!$(this).find("img:visible").width()) { // tag image might not be visible at this point, // so we add its future width to the overflow calculation // the goal is to hide tags that do not fit one line extra_width += 28; } if (is_overflowing($(this), extra_width)) { $(this).hide(); } });
希望这可以帮助。
