改成這樣你應該就能看到123有印出來了，剩下自己寫。

function addDemo(){
   if(contain.scrollHeight - contain.scrollTop === contain.clientHeight){
     console.log('123')
     // demo.appendChild(str);
   }
}

https://codepen.io/ted59438/pen/MWvopYG?editors=1111

1. 這個範例不能用 contain 元素的 scroll ，要改用 docment.documentElement 的 scroll
   (觀察下面的 console 會知道原因，scroll 卷軸不是長在 contain 元素上面)
2. 一般會在接近快底部的時候載入新的 DOM，不會到剛好底部的時候才載入
3. 如果要以字串的方式新增 DOM 節點，可以使用 dom.insertAdjacentHTML('beforeend', str)

let demo = document.querySelector('.demo');
let contain = document.querySelector('#contain');
let str = `<div class="demo">Lorem ipsum dolor sit amet consectetur.</div>`;

function addDemo() {
   let documentElement = document.documentElement
   
   console.log(contain.scrollTop)
   console.log(documentElement.scrollTop)
   
   if (documentElement.scrollTop + 10 >= documentElement.scrollHeight - documentElement.clientHeight) {
     console.log('123')
     
     for (let i = 0; i < 20; i++) {
        contain.insertAdjacentHTML('beforeend', str)
     }
   }
}

window.addEventListener('scroll', addDemo);

不是從底部新增元素的原因：
因為 document.querySelector('.demo') 抓到的是第一個 .demo 元素，但是這次不會用到這一句。

試試看下方的程式碼吧，這應該就是你想要的結果！

let container = document.querySelector('#contain');
let str = '<div class="demo red">Lorem ipsum dolor sit amet consectetur.</div>';

window.addEventListener('scroll', addDemo);

function addDemo() {
    /* 不是底部則跳出函式 */
    if (window.pageYOffset + window.innerHeight < document.documentElement.offsetHeight) return; 

    for (let i = 0; i < 5; i++) {
        container.insertAdjacentHTML('beforeend', str)
    }
}