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
Signed by: hippoz
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;
let scrollTarget;
let scrollAnchor;
let shouldAutoscroll = true;
let lastScrollHeight = null;
let isScrolledToBottom = true;
@ -27,16 +26,16 @@
lastScrollHeight = null;
return;
}
if (shouldAutoscroll && scrollAnchor) {
if (shouldAutoscroll) {
messagesLog("[afterUpdate] performing autoscroll...");
scrollAnchor.scrollIntoView(false);
scrollTarget.scrollTo(0, scrollTarget.scrollHeight);
}
});
});
const onScroll = (e) => {
const { scrollHeight, scrollTop, clientHeight } = e.target;
if ((scrollHeight - scrollTop - clientHeight) <= 20) { // user scrolled to bottom
const { offsetHeight, scrollTop, scrollHeight } = e.target;
if ((offsetHeight + scrollTop) > (scrollHeight - 20)) { // user scrolled to bottom
messages.setIsCollectingOldMessages(true);
shouldAutoscroll = true;
isScrolledToBottom = true;
@ -62,12 +61,11 @@
const windowDidResize = () => {
// 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
if (isScrolledToBottom || $smallViewport) {
messagesLog("[windowDidResize] window resized, queueing microtask to scroll to bottom...");
queueMicrotask(() => {
scrollAnchor.scrollIntoView(false);
scrollTarget.scrollTo(0, scrollTarget.scrollHeight);
messagesLog("[windowDidResize] scroll to bottom microtask finished.");
});
}
@ -123,5 +121,4 @@
{/if}
<Message message={message} />
{/each}
<div bind:this={ scrollAnchor } />
</div>