2 aşama ile yapılabilir; content dom olduğunda data fetch etmek için request atılacak ve data sayfada render olacak sonrasında scroll sayfanın en altına gönderilecek. event listener ile scroll kontrol edilecek sayfa sonuna geldiğinde yeni dataları fetch etmek için request trigger edilecek. infinite scroll mantığıyla.
const fetchData = () => {
axios.get('endpoint')
.then(response => {
// response'tan gelen dataları sayfaya ekleme işlemi
// sayfaya ekleme tamamlandıktan sonra scroll aşağıya
window.scrollTo(0, document.body.scrollHeight);
});
};
const checkScroll = () => {
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
fetchData();
}
};
document.addEventListener('DOMContentLoaded', () => {
// ilk data fetch
fetchData();
// scroll event listener
window.addEventListener('scroll', checkScroll);
});chrome extension politikası gereği bu tarz işlemleri belki engelliyor olabilir. bu sebeple çalışmazsa request işlemlerine göre farklı bir yöntem olarak
MutationObserver ile sayfadaki değişlikleri yakalayan bir observer yapısı kurarak scroll hareketini sağlayabilirsiniz.