hippoz/waffle
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

cleaner autoscroll system - may fix mobile webkit issues

Browse source
This commit is contained in:
hippoz 2022-11-17 21:38:40 +02:00
parent 17e086769d
commit e3d6527209
No known key found for this signature in database
GPG key ID: 7C52899193467641
1 changed files with 5 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
frontend/src/components/Messages.svelte
View file

@ -8,7 +8,6 @@
export let channelId; export let channelId;
let scrollTarget; let scrollTarget;
let scrollAnchor;
let shouldAutoscroll = true; let shouldAutoscroll = true;
let lastScrollHeight = null; let lastScrollHeight = null;
let isScrolledToBottom = true; let isScrolledToBottom = true;
@ -27,16 +26,16 @@
lastScrollHeight = null; lastScrollHeight = null;
return; return;
} }
if (shouldAutoscroll && scrollAnchor) { if (shouldAutoscroll) {
messagesLog("[afterUpdate] performing autoscroll..."); messagesLog("[afterUpdate] performing autoscroll...");
scrollAnchor.scrollIntoView(false); scrollTarget.scrollTo(0, scrollTarget.scrollHeight);
} }
}); });
}); });
const onScroll = (e) => { const onScroll = (e) => {
const { scrollHeight, scrollTop, clientHeight } = e.target; const { offsetHeight, scrollTop, scrollHeight } = e.target;
if ((scrollHeight - scrollTop - clientHeight) <= 20) { // user scrolled to bottom if ((offsetHeight + scrollTop) > (scrollHeight - 20)) { // user scrolled to bottom
messages.setIsCollectingOldMessages(true); messages.setIsCollectingOldMessages(true);
shouldAutoscroll = true; shouldAutoscroll = true;
isScrolledToBottom = true; isScrolledToBottom = true;
@ -62,12 +61,11 @@
const windowDidResize = () => { const windowDidResize = () => {
// TODO: hack // TODO: hack
// showSidebar is false on small viewports
// scrolling to bottom when the virtual keyboard pops up does not work on chromium purely based on isScrolledToBottom for some reason // scrolling to bottom when the virtual keyboard pops up does not work on chromium purely based on isScrolledToBottom for some reason
if (isScrolledToBottom || $smallViewport) { if (isScrolledToBottom || $smallViewport) {
messagesLog("[windowDidResize] window resized, queueing microtask to scroll to bottom..."); messagesLog("[windowDidResize] window resized, queueing microtask to scroll to bottom...");
queueMicrotask(() => { queueMicrotask(() => {
scrollAnchor.scrollIntoView(false); scrollTarget.scrollTo(0, scrollTarget.scrollHeight);
messagesLog("[windowDidResize] scroll to bottom microtask finished."); messagesLog("[windowDidResize] scroll to bottom microtask finished.");
}); });
} }
@ -123,5 +121,4 @@
{/if} {/if}
<Message message={message} /> <Message message={message} />
{/each} {/each}
<div bind:this={ scrollAnchor } />
</div> </div>