4

I've found that classic MDN formula to check if content has been scrolled to the bottom

element.scrollHeight - element.scrollTop === element.clientHeight

doesn't work for all cases any more. For example if you change the scale of content to something bigger than 100% for the demo page on MDN you will not get the right result. This happens because now browsers use subpixel precision on elements. Particularly scrollTop for not 100% scale is fractional value now. Actually the problem happens because of === sign in the formula above.

So the simplest but still reliable solution is wanted.

Konstantin Smolyanin
  • 16,105
  • 12
  • 51
  • 46
  • 1
    This also happens on any displays with devicePixelRatio not `1` causing CSS pixels to be scaled, even if the elements themselves are not scaled. – trusktr Feb 11 '22 at 19:54

1 Answers1

4

My current solution:

function isContentScrolledToBottom(element) {
    const rest = element.scrollHeight - element.scrollTop;
    return Math.abs(element.clientHeight - rest) < 1;
}

It checks if element is scrolled to bottom with ±1 accuracy.

Konstantin Smolyanin
  • 16,105
  • 12
  • 51
  • 46
  • 1
    This is exactly the answer! Too bad all the other SO questions come up way before this one, and they all have wrong answers. I was going to answer with `Math.abs(el.scrollHeight - el.clientHeight - el.scrollTop) < 1` which is essentially the same thing. – trusktr Feb 11 '22 at 19:47