I don't know if I'm not looking right or that no one has ever needed something like this.
The thing is that I am trying that when a div with fixed size and overflow: auto; fills up and needs to scroll, show me an alert to let me know. It is not really an alert that I am going to show, but a div that informs that there is a scroll. But not to complicate things, with a simple alert I can get an idea.
I don't have any code written so you can get an idea, because I haven't found anything related to this at all. With showing something when a point arrives the scroll yes. But I only need that if the div needs to scroll, tell me.
Thank you very much to everyone for your help
The latest recommended way to detect element changes is the use of MutationObservers which are proposed to replace Mutation Events . To be notified of changes in the content of an element it is necessary to observe the property
childList
.For example if you have
div
something like this in html:JavaScript:
Example: https://jsfiddle.net/wallek876/x6yzygvw/
Although the use of
DOMSubtreeModified
o Mutation Events in general has been defined as obsolete by the latest web standards, for performance and compatibility issues between browsers, I leave the original answer as a reference, although its use is not recommended.You can use the event, and then check forDOMSubtreeModified
to add a trigger that runs when the content of the element is modifiedoverflow
both horizontal and vertical:Example: https://jsfiddle.net/wallek876/qusab0r9/
You should only compare two options for
scroll
horizontal and vertical.For horizontal scrolling I would compare scrollWidth (returns the width in pixels of an element's content) with clientWidth (returns the width of an element in pixels, including the padding width but not the width of the vertical scroll bar) , this it could be validated in the event
DOMSubtreeModified
but it is not recommended to use it since it is deprecated , instead you could use MutationObserverScroll Horizontal ,Example
Vertical Scroll
You could also validate this before adding or removing content from the element, as is normally done through popular events.