diff --git a/resources/views/livewire/chat/public-chat.blade.php b/resources/views/livewire/chat/public-chat.blade.php index daed003..fa26142 100755 --- a/resources/views/livewire/chat/public-chat.blade.php +++ b/resources/views/livewire/chat/public-chat.blade.php @@ -614,14 +614,14 @@ let userScrolledUp = false; let newMsgCount = 0; - let lastHeight = 0; + let lastScrollHeight = container.scrollHeight; function atBottom() { - return container.scrollHeight - container.scrollTop - container.clientHeight < 100; + return container.scrollHeight - container.scrollTop - container.clientHeight < 120; } - function scrollToBottom(smooth) { - container.scrollTo({ top: container.scrollHeight, behavior: smooth ? 'smooth' : 'auto' }); + function scrollToBottom() { + container.scrollTop = container.scrollHeight; } function showBadge(n) { @@ -638,15 +638,13 @@ newMsgCount = 0; } - // Bajar al fondo al hacer click en el badge if (badgeBtn) { badgeBtn.addEventListener('click', function () { - scrollToBottom(true); + container.scrollTo({ top: container.scrollHeight, behavior: 'smooth' }); hideBadge(); }); } - // Detectar scroll manual container.addEventListener('scroll', function () { if (atBottom()) { userScrolledUp = false; @@ -657,24 +655,23 @@ }, { passive: true }); // Scroll inicial al fondo - scrollToBottom(false); - lastHeight = container.scrollHeight; + scrollToBottom(); - // Después de cada actualización de Livewire - document.addEventListener('livewire:update', function () { - setTimeout(function () { - const newHeight = container.scrollHeight; - const grew = newHeight > lastHeight; - lastHeight = newHeight; + // MutationObserver: detecta cuando Livewire agrega/modifica nodos en el contenedor + const observer = new MutationObserver(function () { + const newHeight = container.scrollHeight; + if (newHeight === lastScrollHeight) return; + lastScrollHeight = newHeight; - if (!userScrolledUp) { - scrollToBottom(false); - } else if (grew) { - newMsgCount++; - showBadge(newMsgCount); - } - }, 30); + if (!userScrolledUp) { + scrollToBottom(); + } else { + newMsgCount++; + showBadge(newMsgCount); + } }); + + observer.observe(container, { childList: true, subtree: true }); } if (document.readyState === 'loading') { @@ -683,7 +680,6 @@ initChatScroll(); } - // Re-inicializar si Livewire monta el componente dinámicamente document.addEventListener('livewire:load', initChatScroll); })();