html - How to use javascript to determine whether a div has overflowed
PHP中文网
PHP中文网 2017-05-18 11:00:38
0
1
957

There is a p (id="info") element on the web page. Its width and height are fixed. The css is as follows:

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

It contains several p (or other block-level elements) which are dynamically obtained through AJAX, so we don’t know what the height is. If there are too many or too many, it will cause the info to overflow. Therefore, the overflow style of info is set to auto, so that scroll bars will appear when the content overflows.

my question is:

Can I use javascript to determine whether this info has overflowed?

Or this is also possible: use javascript to determine whether the info scroll bar has appeared?

(Explain the purpose of doing this. AJAX will continuously pull information from the server, but the length of the entries obtained each time may be very different, so I don’t know which entry will be displayed when info will overflow. If info If it overflows, the program will delete the old entries appropriately, otherwise it will continue to accumulate in the info)

PHP中文网
PHP中文网

认证0级讲师

reply all(1)
为情所困

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

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

For scrollHeightclientHeight, you can check out MDN’s introduction:
scrollHeight

clientHeight

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template