登陆

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

网页上有一个p(id="info")元素,它的宽和高是固定的,css如下:

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

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

我的问题是:

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

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

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

# JavaScript
PHP中文网PHP中文网1818 天前501 次浏览

全部回复(1)我要回复

  • 为情所困

    为情所困2017-05-18 11:02:38

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

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

    关于scrollHeightclientHeight可以看看MDN的介绍:
    scrollHeight

    clientHeight

    回复
    0
  • 取消回复发送