TL;DR;
Math.abs(element.scrollHeight - element.scrollTop - element.clientHeight) < 1
Concept
At its core, "having scrolled to the bottom" refers to the moment when the scrollable area (scrollHeight
) minus the distance of the visible content from the top (scrollTop
) equals the height of the visible content (clientHeight
).
Differently put, we are "scrolled" when this equivalence is true::
scrollHeight - scrollTop - clientHeight === 0

Preventing Rounding Error
As mentioned however, some of these properties are rounded, which means that the equality can fail in cases where scrollTop
would have a decimal component or when the rounded values align poorly.
It is possible to mitigate that problem by comparing the absolute difference to a tolerable threshold:
Math.abs(element.scrollHeight - element.clientHeight - element.scrollTop) < 1
A snippet that prevents rouding error could look like this:
document.getElementById('constrained-container').addEventListener('scroll', event => {
const {scrollHeight, scrollTop, clientHeight} = event.target;
if (Math.abs(scrollHeight - clientHeight - scrollTop) < 1) {
console.log('scrolled');
}
});
#constrained-container {
height: 150px;
overflow-y: scroll;
}
#very-long-content {
height: 600px;
}
<div id="constrained-container">
<div id="very-long-content">
scroll me to the bottom
</div>
</div>
Note that I've added a div that is too big for its container to force the scrolling but there's no need to "wrap" the content in another element, text directly in an element would make the element overflow.
Debouncing, Delaying and Throttling
The more I understand about it and the less I find it's within the scope of this answer (this codereview question and its answer, and this linked article are of interest), but in specific cases (if the handler does expensive computation, if we tie an animation to the scroll event, if we only want to launch the event at the end of the scroll motion, or any situation that may warrants it) it can be useful to:
- debounce (fire the handler when the first scroll happen, then prevent it from firing too fast),
- delay (prevent the execution of the handler until the scroll event wasn't fired for a period of time. this is often called debouncing in Ecmascript context),
- or throttle (preventing the handler to fire more than once every period of time).
Great care must be taken in choosing to do any of these things, for instance throttling the event could prevent the last scroll to fire, which could completely defeat an infinite scroller.
Not doing any of those three things works perfectly fine most of the time, as just looking if we're completely scrolled is relatively inexpensive.