SOURCE

let index = 1
const box = document.querySelector('.container')
const placeholder = document.querySelector('.placeholder')
const button = document.querySelector('#stop')
let str = ``
let timer = setInterval(() => {
    str = `<p>${index++}</p>`+str
    box.innerHTML = str
}, 800)

button.addEventListener('click', () => {
    clearInterval(timer)
})

<div class="box">
    <div class="placeholder"></div>
    <div class="container"></div>
</div>
<button id="stop">停止</button>
<style>
    .placeholder {
        flex-grow: 1;
        flex-shrink: 1;
    }
    .box {
        width: 400px;
        height: 400px;
        border: 1px solid red;
        overflow: auto;
        display: flex;
        flex-direction: column-reverse;
    }

    .container {
        display: flex;
        flex-direction: column-reverse;
    }
</style>