How to detect when the user scrolls to the bottom of the site?

You can use the affix function of js to generate effects when you move the scroll. I give you an example with Bootstrap that emulates what you are looking for, in the example basically the color blocks would be the bootom of your page, it depends what function or style triggers.

$('#footer').affix({
offset: {
top: 100, //estilos
bottom: function () {
  return (this.bottom = $('.footer').outerHeight(true)) //eventos
}

} })

link

I leave my solution, and most importantly. Without bootstrap, in case someone needs it.

let container = document.getElementById('body');

container.onscroll = function () {
  let height = this.clientHeight;
  let scrollHeight = this.scrollHeight;
  let scrollTop = this.scrollTop;
  
  if (height + scrollTop === scrollHeight) {
    viewMore()
    }
  }

}