Anchor scroll to bottom when switching channels.

This commit is contained in:
Paul 2021-08-08 23:01:47 +01:00
parent 8cb02d6d34
commit c8b5753211
3 changed files with 19 additions and 2 deletions

2
external/lang vendored

@ -1 +1 @@
Subproject commit 8755aa48b2173f1f509e8fe6edaccc5ac32601f5 Subproject commit 1ed190cd12a9a99b3e57a626118a65c1424cb194

View file

@ -23,6 +23,7 @@ export class ChannelRenderer {
stale = false; stale = false;
fetching = false; fetching = false;
scrollPosition = 0; scrollPosition = 0;
scrollAnchored = false;
constructor(channel: Channel) { constructor(channel: Channel) {
this.channel = channel; this.channel = channel;
@ -31,6 +32,7 @@ export class ChannelRenderer {
channel: false, channel: false,
currentRenderer: false, currentRenderer: false,
scrollPosition: false, scrollPosition: false,
scrollAnchored: false,
}); });
this.receive = this.receive.bind(this); this.receive = this.receive.bind(this);

View file

@ -173,7 +173,16 @@ export const MessageArea = observer(({ channel }: Props) => {
if (message) return; if (message) return;
if (renderer.state === "RENDER") { if (renderer.state === "RENDER") {
runInAction(() => (renderer.fetching = true)); runInAction(() => (renderer.fetching = true));
setScrollState({ type: "ScrollTop", y: renderer.scrollPosition });
console.log(renderer.scrollAnchored);
if (renderer.scrollAnchored) {
setScrollState({ type: "ScrollToBottom" });
} else {
setScrollState({
type: "ScrollTop",
y: renderer.scrollPosition,
});
}
} else { } else {
renderer.init(); renderer.init();
} }
@ -254,6 +263,12 @@ export const MessageArea = observer(({ channel }: Props) => {
if (atBottom(100)) { if (atBottom(100)) {
renderer.loadBottom(current!); renderer.loadBottom(current!);
} }
if (atBottom()) {
renderer.scrollAnchored = true;
} else {
renderer.scrollAnchored = false;
}
} }
current.addEventListener("scroll", onScroll); current.addEventListener("scroll", onScroll);