Mesajlaşma platformu için AJAX endpoint işlemi düzelmiyor

merhaba arkadaşlar mesajlaşma sistemi yaptım herşeyi çalıştırıyorum AJAX endpoint üzerine mesajlaşmayı kurdum ve başarılı şekilde anlık mesajlaşma yapılıyor ama ben burada şunu yapamadım

sayfaya yani mesajlaşma alanına girince scroll alta alıyor burası normal sonrasında serbest bırakamıyorum scroll sürekli alta alıyor mesela mesajlaşmadaki geçmişi görmem gerekirken sürekli alta alıyor bunun için yardımcı olabilirmisiniz aslında yapmak istediğim şu

sayfaya girildiğinde scrol altta kalacak
sonra serbest kalacak geçmiş mesajları okuyabileyim
yeni mesaj gelince scrol alta alması lazım

ama benim yaptığımda sürekli alta alıyor
BURADA NEREDE YANLIŞ YAPIYORUM ARKADAŞLAR YARDIMCI OLABİLİRMİSİNİZ

const toUserId = <?php echo isset($to_user) ? $to_user_id : 'null'; ?>;
if (toUserId) {
    // Mesajları sürekli olarak yenilemek için
    setInterval(fetchMessages, 1000); // 1 saniyede bir mesajları yenile

    let isUserScrolling = false;
    let isInitialLoad = true; // İlk yükleme kontrolü
    let scrollAtBottom = true; // Scroll başlangıçta en altta mı?

    // Sayfa yüklendiğinde scroll'u en alta kaydır
    window.addEventListener('load', () => {
        const chatBox = document.querySelector('.chat-box');
        if (chatBox) {
            chatBox.scrollTop = chatBox.scrollHeight; // Sayfa ilk açıldığında scroll’u en alta kaydır
            scrollAtBottom = true; // Sayfa açıldığında scroll en altta
            isInitialLoad = false; // İlk yükleme tamamlandı
        }
    });

    // Mesajları fetch et ve ekrana getir
    function fetchMessages() {
        fetch('fetch_messages.php?to=' + toUserId)
            .then(response => response.json())
            .then(data => {
                const chatBox = document.querySelector('.chat-box');
                
                // Eski mesajları temizle
                chatBox.innerHTML = '';

                // Yeni mesajları ekle
                data.messages.forEach(message => {
                    const messageDiv = document.createElement('div');
                    messageDiv.classList.add('message');
                    messageDiv.classList.add(message.sender_id == <?php echo $from_user_id; ?> ? 'sent' : 'received');
                    messageDiv.innerHTML = `<p>${message.content}</p><small>${message.sent_time}</small>`;
                    chatBox.appendChild(messageDiv);
                });

                // Eğer kullanıcı scroll etmiyorsa, scroll’u en alta kaydır
                if (scrollAtBottom) {
                    chatBox.scrollTop = chatBox.scrollHeight; // Scroll'u en alta kaydır
                }
            });
    }

    // Mesaj formunun gönderilmesini dinle
    const messageForm = document.querySelector('form');
    if (messageForm) {
        messageForm.addEventListener('submit', function(e) {
            e.preventDefault(); // Sayfa yenilenmesin
            const messageContent = document.querySelector('textarea[name="message"]').value;
            const chatBox = document.querySelector('.chat-box');

            // Yeni mesajı hemen ekle
            const messageDiv = document.createElement('div');
            messageDiv.classList.add('message', 'sent');
            messageDiv.innerHTML = `<p>${messageContent}</p><small>${new Date().toLocaleTimeString()}</small>`;
            chatBox.appendChild(messageDiv);

            // Mesaj gönderildikten sonra, scroll’u her zaman en alta kaydır
            chatBox.scrollTop = chatBox.scrollHeight;

            // Mesajı veritabanına kaydetmek için POST isteği gönder
            fetch('chat.php?to=' + toUserId, {
                method: 'POST',
                body: new FormData(messageForm),
            }).then(response => {
                // Mesaj gönderildikten sonra, fetchMessages çağrısı yapılır ve en son mesaj eklenir
                fetchMessages();
            });

            // Formu temizle
            messageForm.reset();
        });
    }

    // Kullanıcının scroll hareketini takip et
    const chatBox = document.querySelector('.chat-box');
    if (chatBox) {
        chatBox.addEventListener('scroll', () => {
            const scrollTop = chatBox.scrollTop;
            const scrollHeight = chatBox.scrollHeight;
            const clientHeight = chatBox.clientHeight;

            // Eğer kullanıcı scroll'u en alta kaydırmamışsa, scrollAtBottom'u false yap
            if (scrollTop + clientHeight < scrollHeight - 10) { // 10px tolerans
                isUserScrolling = true; // Kullanıcı scroll yapıyor
                scrollAtBottom = false; // Kullanıcı geçmiş mesajlara bakıyor
            } else {
                isUserScrolling = false; // Kullanıcı scroll'u en alta kaydırdı
                scrollAtBottom = true; // Kullanıcı en altta
            }
        });
    }

    // Yeni mesaj geldiğinde scroll'u en alta kaydır
    function scrollToBottomIfNeeded() {
        if (!isUserScrolling) {
            const chatBox = document.querySelector('.chat-box');
            if (chatBox) {
                chatBox.scrollTop = chatBox.scrollHeight; // Mesaj geldikçe scroll'u en alta kaydır
            }
        }
    }

    // Her mesaj yenilendiğinde scroll'u kontrol et
    setInterval(scrollToBottomIfNeeded, 1000); // 1 saniyede bir scroll kontrolü
}

son mesajı array kontrolüyle sağlarsın.

onun dışında ajax kullanmanı tavsiye etmiyorum, socket yapısı yada farklı teknoloji kullan.

websocket yada diğer kodlamayı kullanamıyorum hocam yani elimdeki host zaten kısıtlı ajax ile yapıyorum şuan için yeni başladım kodlamaya :/ burada düzeltilmiş şekilde yapılabilirse çok sevinirim komple php dosyasını paylaşabilirim eğer gerekirse

fetchMessages kontrolu 1 saniyede bir calisiyor. scroll bottomda bunun icinde oldugu icin oda 1 saniyede 1 asagi cekiyor çok sagliksiz her kontrolde mesajları silip tekrar ekliyor. Son mesajı al degisirse scroll bottom olsun ve son mesaj eklensin.

peki bana yardımcı olabilirmisin hocam kodda tam olarak hangi alanlar düzeltilecek eğer vaktiniz var ise düzeltebilirmisiniz paylaşım mantığı tam olarak anlamış olabileyim vaktiniz var ise