rattatwinko/bytechat
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

QoL - U2

Browse Source 
changed the mobile scrolling motion
This commit is contained in:
rattatwinko
2025-08-24 19:06:28 +00:00
parent b9915319b6
commit fbe93a9a8f
1 changed files with 109 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

144
src/templates/chat.html
View File

@@ -148,20 +148,32 @@
if (diff > 150) { // Keyboard is likely open if (diff > 150) { // Keyboard is likely open
if (messagesWrapper) { if (messagesWrapper) {
messagesWrapper.style.paddingBottom = '120px'; // More padding for mobile keyboard messagesWrapper.style.paddingBottom = '140px'; // Even more padding for mobile keyboard
// Auto-scroll when keyboard opens, with multiple attempts for reliability // Reset scroll state and aggressively scroll to bottom
userScrolled = false; // Reset scroll state when keyboard opens userScrolled = false;
// Multiple scroll attempts with increasing delays
setTimeout(() => { setTimeout(() => {
scrollToBottom(false); messagesWrapper.scrollTop = messagesWrapper.scrollHeight + 150;
}, 200); }, 100);
// iOS often needs multiple scroll attempts setTimeout(() => {
messagesWrapper.scrollTop = messagesWrapper.scrollHeight + 150;
}, 250);
setTimeout(() => {
messagesWrapper.scrollTop = messagesWrapper.scrollHeight + 150;
}, 400);
// iOS often needs even more attempts
if (isIOS) { if (isIOS) {
setTimeout(() => { setTimeout(() => {
messagesWrapper.scrollTop = messagesWrapper.scrollHeight; messagesWrapper.scrollTop = messagesWrapper.scrollHeight + 200;
}, 400);
setTimeout(() => {
messagesWrapper.scrollTop = messagesWrapper.scrollHeight;
}, 600); }, 600);
setTimeout(() => {
messagesWrapper.scrollTop = messagesWrapper.scrollHeight + 200;
}, 800);
setTimeout(() => {
messagesWrapper.scrollTop = messagesWrapper.scrollHeight + 200;
}, 1000);
} }
} }
} else { } else {
@@ -170,9 +182,14 @@
// Scroll to bottom when keyboard closes too // Scroll to bottom when keyboard closes too
setTimeout(() => { setTimeout(() => {
if (!userScrolled) { if (!userScrolled) {
scrollToBottom(false); messagesWrapper.scrollTop = messagesWrapper.scrollHeight + 100;
} }
}, 200); }, 200);
setTimeout(() => {
if (!userScrolled) {
messagesWrapper.scrollTop = messagesWrapper.scrollHeight + 100;
}
}, 400);
} }
} }
} }
@@ -199,9 +216,16 @@
setTimeout(() => { setTimeout(() => {
const messagesWrapper = document.getElementById('messagesWrapper'); const messagesWrapper = document.getElementById('messagesWrapper');
if (messagesWrapper) { if (messagesWrapper) {
messagesWrapper.scrollTop = messagesWrapper.scrollHeight; messagesWrapper.scrollTop = messagesWrapper.scrollHeight + 200;
} }
}, 800); }, 800);
// Additional scroll attempt for stubborn mobile browsers
setTimeout(() => {
const messagesWrapper = document.getElementById('messagesWrapper');
if (messagesWrapper) {
messagesWrapper.scrollTop = messagesWrapper.scrollHeight + 250;
}
}, 1200);
} }
}); });
@@ -230,11 +254,27 @@
if (messagesWrapper) { if (messagesWrapper) {
// On mobile, especially iOS, direct scrollTop assignment is more reliable // On mobile, especially iOS, direct scrollTop assignment is more reliable
if (isMobile) { if (isMobile) {
messagesWrapper.scrollTop = messagesWrapper.scrollHeight; // Force scroll to absolute bottom with extra padding
// Double-check scroll position after a short delay for mobile const targetScroll = messagesWrapper.scrollHeight + 100;
messagesWrapper.scrollTop = targetScroll;
// Multiple aggressive scroll attempts for mobile reliability
setTimeout(() => { setTimeout(() => {
messagesWrapper.scrollTop = messagesWrapper.scrollHeight; messagesWrapper.scrollTop = messagesWrapper.scrollHeight + 100;
}, 100); }, 50);
setTimeout(() => {
messagesWrapper.scrollTop = messagesWrapper.scrollHeight + 100;
}, 150);
setTimeout(() => {
messagesWrapper.scrollTop = messagesWrapper.scrollHeight + 100;
}, 300);
// Final iOS-specific attempt
if (isIOS) {
setTimeout(() => {
messagesWrapper.scrollTop = messagesWrapper.scrollHeight + 200;
}, 500);
}
} else { } else {
if (smooth) { if (smooth) {
messagesWrapper.scrollTo({ messagesWrapper.scrollTo({
@@ -334,11 +374,26 @@
// Only auto-scroll if user hasn't manually scrolled up // Only auto-scroll if user hasn't manually scrolled up
if (!userScrolled) { if (!userScrolled) {
// Longer delay for mobile to ensure proper rendering // Multiple scroll attempts for mobile with extra padding
const delay = isMobile ? 200 : 50; const messagesWrapper = document.getElementById('messagesWrapper');
setTimeout(() => { if (messagesWrapper) {
scrollToBottom(false); // Always instant scroll on mobile setTimeout(() => {
}, delay); messagesWrapper.scrollTop = messagesWrapper.scrollHeight + 150;
}, 100);
setTimeout(() => {
messagesWrapper.scrollTop = messagesWrapper.scrollHeight + 150;
}, 250);
if (isMobile) {
setTimeout(() => {
messagesWrapper.scrollTop = messagesWrapper.scrollHeight + 200;
}, 400);
if (isIOS) {
setTimeout(() => {
messagesWrapper.scrollTop = messagesWrapper.scrollHeight + 200;
}, 600);
}
}
}
} }
} }
} }
@@ -346,19 +401,28 @@
// Force scroll with mobile optimizations // Force scroll with mobile optimizations
function forceScrollToBottom() { function forceScrollToBottom() {
userScrolled = false; userScrolled = false;
const delay = isMobile ? 300 : 100; const messagesWrapper = document.getElementById('messagesWrapper');
setTimeout(() => { if (messagesWrapper) {
scrollToBottom(false); // Immediate aggressive scroll
// iOS double-check messagesWrapper.scrollTop = messagesWrapper.scrollHeight + 150;
setTimeout(() => {
messagesWrapper.scrollTop = messagesWrapper.scrollHeight + 150;
}, 100);
setTimeout(() => {
messagesWrapper.scrollTop = messagesWrapper.scrollHeight + 200;
}, 300);
// Extra attempts for iOS
if (isIOS) { if (isIOS) {
setTimeout(() => { setTimeout(() => {
const messagesWrapper = document.getElementById('messagesWrapper'); messagesWrapper.scrollTop = messagesWrapper.scrollHeight + 250;
if (messagesWrapper) { }, 500);
messagesWrapper.scrollTop = messagesWrapper.scrollHeight; setTimeout(() => {
} messagesWrapper.scrollTop = messagesWrapper.scrollHeight + 250;
}, 100); }, 700);
} }
}, delay); }
} }
// Mobile-optimized mutation observer // Mobile-optimized mutation observer
@@ -376,10 +440,20 @@
); );
if (hasNewMessage && !userScrolled) { if (hasNewMessage && !userScrolled) {
const delay = isMobile ? 250 : 50; const messagesWrapper = document.getElementById('messagesWrapper');
setTimeout(() => { if (messagesWrapper) {
scrollToBottom(false); // Instant scroll for reliability setTimeout(() => {
}, delay); messagesWrapper.scrollTop = messagesWrapper.scrollHeight + 150;
}, 100);
setTimeout(() => {
messagesWrapper.scrollTop = messagesWrapper.scrollHeight + 200;
}, 300);
if (isMobile) {
setTimeout(() => {
messagesWrapper.scrollTop = messagesWrapper.scrollHeight + 250;
}, 500);
}
}
} }
} }
}); });