網頁上有一個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裡堆積)
为情所困2017-05-18 11:02:38
可以用元素的scrollHeight
属性和clientHeight
属性来判断, 当scrollHeight
大于clientHeight
的时候,元素就是可以垂直滚动的;如果检测水平滚动的话,可以用scrollWidth
和clientWidth
var element = document.getElementById('element');
if (element.scrollHeight > element.clientHeight) {
...
}
關於scrollHeight
和clientHeight
可以看看MDN的介紹:
scrollHeight
clientHeight