首頁  >  問答  >  主體

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裡堆積)

PHP中文网PHP中文网2734 天前928

全部回覆(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
  • 取消回覆