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

QoL - U3

Browse Source 
improved on scrolling
This commit is contained in:
rattatwinko
2025-08-24 19:23:06 +00:00
parent fbe93a9a8f
commit 9bf02ccdf3
1 changed files with 66 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
src/templates/chat.html
View File

@@ -147,6 +147,7 @@
const messagesWrapper = document.getElementById('messagesWrapper'); const messagesWrapper = document.getElementById('messagesWrapper');
if (diff > 150) { // Keyboard is likely open if (diff > 150) { // Keyboard is likely open
keyboardOpen = true;
if (messagesWrapper) { if (messagesWrapper) {
messagesWrapper.style.paddingBottom = '140px'; // Even more padding for mobile keyboard messagesWrapper.style.paddingBottom = '140px'; // Even more padding for mobile keyboard
// Reset scroll state and aggressively scroll to bottom // Reset scroll state and aggressively scroll to bottom
@@ -177,6 +178,7 @@
} }
} }
} else { } else {
keyboardOpen = false;
if (messagesWrapper) { if (messagesWrapper) {
messagesWrapper.style.paddingBottom = '80px'; messagesWrapper.style.paddingBottom = '80px';
// Scroll to bottom when keyboard closes too // Scroll to bottom when keyboard closes too
@@ -248,32 +250,45 @@
// Mobile-optimized auto-scroll functionality // Mobile-optimized auto-scroll functionality
let isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) || window.innerWidth <= 768; let isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) || window.innerWidth <= 768;
let isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent); let isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent);
let keyboardOpen = false;
function scrollToBottom(smooth = true) { function scrollToBottom(smooth = true) {
const messagesWrapper = document.getElementById('messagesWrapper'); const messagesWrapper = document.getElementById('messagesWrapper');
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) {
// Force scroll to absolute bottom with extra padding // Different scroll behavior based on keyboard state
const targetScroll = messagesWrapper.scrollHeight + 100; const extraPadding = keyboardOpen ? 200 : 100;
const targetScroll = messagesWrapper.scrollHeight + extraPadding;
messagesWrapper.scrollTop = targetScroll; messagesWrapper.scrollTop = targetScroll;
// Multiple aggressive scroll attempts for mobile reliability // Multiple aggressive scroll attempts for mobile reliability
setTimeout(() => { setTimeout(() => {
messagesWrapper.scrollTop = messagesWrapper.scrollHeight + 100; messagesWrapper.scrollTop = messagesWrapper.scrollHeight + extraPadding;
}, 50); }, 50);
setTimeout(() => { setTimeout(() => {
messagesWrapper.scrollTop = messagesWrapper.scrollHeight + 100; messagesWrapper.scrollTop = messagesWrapper.scrollHeight + extraPadding;
}, 150); }, 150);
setTimeout(() => { setTimeout(() => {
messagesWrapper.scrollTop = messagesWrapper.scrollHeight + 100; messagesWrapper.scrollTop = messagesWrapper.scrollHeight + extraPadding;
}, 300); }, 300);
// Extra attempts when just viewing (no keyboard)
if (!keyboardOpen) {
setTimeout(() => {
messagesWrapper.scrollTop = messagesWrapper.scrollHeight + 150;
}, 500);
setTimeout(() => {
messagesWrapper.scrollTop = messagesWrapper.scrollHeight + 150;
}, 750);
}
// Final iOS-specific attempt // Final iOS-specific attempt
if (isIOS) { if (isIOS) {
const finalPadding = keyboardOpen ? 250 : 200;
setTimeout(() => { setTimeout(() => {
messagesWrapper.scrollTop = messagesWrapper.scrollHeight + 200; messagesWrapper.scrollTop = messagesWrapper.scrollHeight + finalPadding;
}, 500); }, keyboardOpen ? 500 : 1000);
} }
} else { } else {
if (smooth) { if (smooth) {
@@ -374,24 +389,42 @@
// Only auto-scroll if user hasn't manually scrolled up // Only auto-scroll if user hasn't manually scrolled up
if (!userScrolled) { if (!userScrolled) {
// Multiple scroll attempts for mobile with extra padding
const messagesWrapper = document.getElementById('messagesWrapper'); const messagesWrapper = document.getElementById('messagesWrapper');
if (messagesWrapper) { if (messagesWrapper) {
// Immediate first scroll
messagesWrapper.scrollTop = messagesWrapper.scrollHeight + 100;
// Progressive scroll attempts with different padding
setTimeout(() => { setTimeout(() => {
messagesWrapper.scrollTop = messagesWrapper.scrollHeight + 150; const padding = keyboardOpen ? 200 : 150;
messagesWrapper.scrollTop = messagesWrapper.scrollHeight + padding;
}, 100); }, 100);
setTimeout(() => { setTimeout(() => {
messagesWrapper.scrollTop = messagesWrapper.scrollHeight + 150; const padding = keyboardOpen ? 200 : 150;
messagesWrapper.scrollTop = messagesWrapper.scrollHeight + padding;
}, 250); }, 250);
if (isMobile) {
// Extra attempts when just viewing (no keyboard)
if (!keyboardOpen && isMobile) {
setTimeout(() => { setTimeout(() => {
messagesWrapper.scrollTop = messagesWrapper.scrollHeight + 200; messagesWrapper.scrollTop = messagesWrapper.scrollHeight + 200;
}, 400); }, 400);
if (isIOS) { setTimeout(() => {
setTimeout(() => { messagesWrapper.scrollTop = messagesWrapper.scrollHeight + 250;
messagesWrapper.scrollTop = messagesWrapper.scrollHeight + 200; }, 600);
}, 600); // Final attempt for stubborn browsers
} setTimeout(() => {
messagesWrapper.scrollTop = messagesWrapper.scrollHeight + 300;
}, 1000);
}
// iOS-specific final attempt
if (isIOS) {
const finalPadding = keyboardOpen ? 250 : 300;
setTimeout(() => {
messagesWrapper.scrollTop = messagesWrapper.scrollHeight + finalPadding;
}, keyboardOpen ? 600 : 1200);
} }
} }
} }
@@ -442,16 +475,30 @@
if (hasNewMessage && !userScrolled) { if (hasNewMessage && !userScrolled) {
const messagesWrapper = document.getElementById('messagesWrapper'); const messagesWrapper = document.getElementById('messagesWrapper');
if (messagesWrapper) { if (messagesWrapper) {
// Immediate scroll
messagesWrapper.scrollTop = messagesWrapper.scrollHeight + 100;
setTimeout(() => { setTimeout(() => {
messagesWrapper.scrollTop = messagesWrapper.scrollHeight + 150; const padding = keyboardOpen ? 200 : 150;
messagesWrapper.scrollTop = messagesWrapper.scrollHeight + padding;
}, 100); }, 100);
setTimeout(() => { setTimeout(() => {
messagesWrapper.scrollTop = messagesWrapper.scrollHeight + 200; const padding = keyboardOpen ? 250 : 200;
messagesWrapper.scrollTop = messagesWrapper.scrollHeight + padding;
}, 300); }, 300);
if (isMobile) {
// Extra scrolling when just viewing (no keyboard)
if (!keyboardOpen && isMobile) {
setTimeout(() => { setTimeout(() => {
messagesWrapper.scrollTop = messagesWrapper.scrollHeight + 250; messagesWrapper.scrollTop = messagesWrapper.scrollHeight + 250;
}, 500); }, 500);
setTimeout(() => {
messagesWrapper.scrollTop = messagesWrapper.scrollHeight + 300;
}, 800);
// Final aggressive attempt for viewing mode
setTimeout(() => {
messagesWrapper.scrollTop = messagesWrapper.scrollHeight + 350;
}, 1200);
} }
} }
} }