SOURCE

const wrapEl = document.querySelector('.wrap')


let val = 0 // 0-100


setInterval(item => {
    wrapEl.style.transform = `translateY(-${val}px)`
    wrapEl.querySelector('div').style.opacity = 0
    wrapEl.querySelectorAll('div').forEach(item => {
        const itemPos = item.getBoundingClientRect()
        console.log(itemPos)
        if (itemPos.top < val) {
            item.style.opacity = 0
        }
    })
    val += 1

}, 150)

<div class="container"> 
    <div class="view">
        <div class="wrap">
            <div>123</div>
            <div>123</div>
            <div>123</div>
            <div>123</div>
            <div>123</div>
            <div>123</div>
            <div>123</div>
            <div>123</div>
            <div>123</div>
            <div>123</div>
            <div>123</div>
            <div>123</div>
            <div>123</div>
            <div>123</div>
            <div>123</div>
            <div>123</div>
            <div>123</div>
            <div>123</div>
            <div>123</div>
            <div>123</div>
            <div>123</div>
            <div>123</div>
            <div>123</div>
            <div>123</div>
            <div>123</div>
            <div>123</div>
            <div>123</div>
            <div>123</div>
            <div>123</div>
            <div>123</div>
            <div>123</div>
            <div>123</div>
            <div>123</div>
            <div>123</div>
            <div>123</div>
            <div>123</div>
        </div>
    </div>
    
</div>

.container{
    height: 400px;
    width: 100px;
    background: #eee;
    
}
.container .view{
    height: 3.5em;
    width: 100px;
    background: #e3e3e3;
    overflow: hidden;
}
.container .wrap{
    height: auto;
    width: 100px;
    transform: translateY(0);
}
.container .wrap div{
    opacity: 1;
  transition: opacity 0.3s;
}