html - 如何用javascript判断div是否发生了溢出

问题描述

问 题

网页上有一个div（id="info"）元素，它的宽和高是固定的，css如下：

div#info 
{
    width: 10cm;
    height: 8cm;
    border-style: solid;
    border-width: 1pt;
    border-color: orange;
    overflow: auto;
}

它里面包含若干个div（或其它的块级元素）这些是通过AJAX动态获取的，所以也不知道高度是多少,如果过多或过大都会导致info的溢出。所以info的overflow样式设置为了auto，这样在内容溢出的时候就会出现滚动条。

我的问题是：

能否用javascript判断这个info是否发生了溢出？

或者这样也可以：用javascript判断info是否已经出现了滚动条？

（解释一下这样做的目的，AJAX会不停的从服务器拉取信息，但每次得到的条目长短可能有很大差异，所以不知道显示到第几条时info会溢出。如果info溢出了，程序就会适当删除旧的条目，否则就会继续在info里堆积）

解决方案

可以用元素的scrollHeight属性和clientHeight属性来判断, 当scrollHeight大于clientHeight的时候，元素就是可以垂直滚动的；如果检测水平滚动的话，可以用scrollWidth和clientWidth

var element = document.getElementById('element');
if (element.scrollHeight > element.clientHeight) {
    ...
}

关于scrollHeight和clientHeight可以看看MDN的介绍:
scrollHeight

clientHeight

这篇关于html - 如何用javascript判断div是否发生了溢出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！