fix: reemplazar livewire:update con MutationObserver para scroll en Android
livewire:update no es un evento DOM válido en Livewire 2. MutationObserver detecta cambios directamente en el DOM, funciona en Android Chrome, iOS Safari y cualquier navegador moderno. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
co-authored by
Claude Sonnet 4.6
parent
4b856f6a43
commit
d77eabc272
@@ -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);
|
||||
})();
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user