html - How to use javascript to determine whether a div has overflowed

Question

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)

Answer 1

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

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

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

clientHeight