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ü
}