add debug logging to autoscroll and experiment with using microtasks
This commit is contained in:
parent
10d25445c5
commit
5aaaf56380
2 changed files with 24 additions and 11 deletions
|
@ -1,9 +1,11 @@
|
|||
<script>
|
||||
import { afterUpdate } from "svelte";
|
||||
import { getItem } from "../storage.js";
|
||||
import logger from "../logging.js";
|
||||
import { messagesStoreProvider, smallViewport } from "../stores.js";
|
||||
import Message from "./Message.svelte";
|
||||
|
||||
const messagesLog = logger("Messages");
|
||||
|
||||
export let channelId;
|
||||
let scrollTarget;
|
||||
let scrollAnchor;
|
||||
|
@ -14,17 +16,22 @@
|
|||
$: messages = messagesStoreProvider.getStore(channelId);
|
||||
|
||||
afterUpdate(() => {
|
||||
// hacky way to preserve scroll position when messages are pushed back
|
||||
if (lastScrollHeight) {
|
||||
scrollTarget.scrollTop = scrollTarget.scrollHeight - lastScrollHeight;
|
||||
lastScrollHeight = null;
|
||||
return;
|
||||
}
|
||||
if (shouldAutoscroll && scrollAnchor) {
|
||||
queueMicrotask(() => {
|
||||
messagesLog("[afterUpdate] reached, creating microtask...");
|
||||
queueMicrotask(() => {
|
||||
messagesLog("[afterUpdate] reached microtask");
|
||||
|
||||
// hacky way to preserve scroll position when messages are pushed back
|
||||
if (lastScrollHeight) {
|
||||
messagesLog("[afterUpdate] restoring scroll height...");
|
||||
scrollTarget.scrollTop = scrollTarget.scrollHeight - lastScrollHeight;
|
||||
lastScrollHeight = null;
|
||||
return;
|
||||
}
|
||||
if (shouldAutoscroll && scrollAnchor) {
|
||||
messagesLog("[afterUpdate] performing autoscroll...");
|
||||
scrollAnchor.scrollIntoView(false);
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
const onScroll = (e) => {
|
||||
|
@ -33,10 +40,13 @@
|
|||
messages.setIsCollectingOldMessages(true);
|
||||
shouldAutoscroll = true;
|
||||
isScrolledToBottom = true;
|
||||
messagesLog("[onScroll] user is scrolled to bottom, enabling autoscroll...");
|
||||
} else {
|
||||
shouldAutoscroll = false;
|
||||
isScrolledToBottom = false;
|
||||
messagesLog("[onScroll] user is no longer scrolled to bottom, disabling autoscroll...");
|
||||
if (scrollTop === 0) {
|
||||
messagesLog("[onScroll] user scrolled to top, loading older messages...");
|
||||
// load older messages if the user scrolls to the top.
|
||||
// save the current scroll height if the server returned any messages,
|
||||
// before commiting them to the store. this is to provide the jank scroll height
|
||||
|
@ -55,8 +65,10 @@
|
|||
// 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);
|
||||
messagesLog("[windowDidResize] scroll to bottom microtask finished.");
|
||||
});
|
||||
}
|
||||
};
|
||||
|
|
|
@ -7,6 +7,7 @@ const defaults = {
|
|||
"state:openChannelId": -1,
|
||||
"log:Gateway": false,
|
||||
"log:Store": false,
|
||||
"log:Messages": false,
|
||||
"ui:stateful:presistSelectedChannel": true,
|
||||
"ui:showSidebarToggle": false,
|
||||
"ui:alwaysUseMobileChatBar": false,
|
||||
|
|
Loading…
Reference in a new issue