global bir değişken tanımlayın hocam

let i = 0;

tüm haberlerinizi bir değişkenin içerisine atın;

let haberler = [{
title:"haber-1",
image:"image-url-1",
url:"haber-url-1"
},
{
title:"haber-1",
image:"image-url-1",
url:"haber-url-1"
}]

daha sonra scroll en aşağıya indiğinde i'yi arttırın.

i++;

daha sonra ilgili elementlerle dizideki öğeleri eşleştirin

window.onscroll = function(ev) {
    if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
        i++;
       document.querySelector("#title").innerHTML = haberler[i].title;
       ...
    }
};

aynı işlemleri scroll yukarı gittiğinde i'yi bir azaltıp (i--) tekrar ekrana bastığınızda istediğiniz gibi çalışıyor olması gerek.
ama scroll hesaplamalarını sizin kendi divlerinize göre yapmanız gerekiyor. üstteki if bloğu sadece sayfanın en altına gelince çalışıyor.