Why is the document height equal to window inner height + pageYoffset?

I am trying to detect when an user has scroll to the very bottom of the page.

The solution that I end up with is the following

var windowHeight = "innerHeight" in window ? window.innerHeight : document.documentElement.offsetHeight;
var body = document.body, html = document.documentElement;
var docHeight = Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight,  html.scrollHeight, html.offsetHeight);
var windowBottom = windowHeight + window.pageYOffset;

if (windowBottom >= docHeight) {
    // Bottom is reached
}

I am confused why this works

From the documentation, innerheight is the height of the view portal, and pageYoffset is the amount of scroll that we make.

So in order to detect scroll to bottom, shouldn't I check if pageYOffset >= documentHeight ?

Why do I have to add innerheight?