ztr/TelegramPWA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Message List: Prevent scroll jumps when selecting

Browse Source
This commit is contained in:
Alexander Zinchuk 2021-08-19 10:33:54 +03:00
parent 9f25cf857e
commit b4ada5d5d0
1 changed files with 2 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/middle/MessageList.tsx
View File

@ -87,7 +87,7 @@ type StateProps = {
type DispatchProps = Pick<GlobalActions, 'loadViewportMessages' | 'setScrollOffset' | 'openHistoryCalendar'>; type DispatchProps = Pick<GlobalActions, 'loadViewportMessages' | 'setScrollOffset' | 'openHistoryCalendar'>;
const BOTTOM_THRESHOLD = 100; const BOTTOM_THRESHOLD = 20;
const UNREAD_DIVIDER_TOP = 10; const UNREAD_DIVIDER_TOP = 10;
const UNREAD_DIVIDER_TOP_WITH_TOOLS = 60; const UNREAD_DIVIDER_TOP_WITH_TOOLS = 60;
const SCROLL_DEBOUNCE = 200; const SCROLL_DEBOUNCE = 200;
@ -335,12 +335,8 @@ const MessageList: FC<OwnProps & StateProps & DispatchProps> = ({
const scrollOffset = scrollOffsetRef.current!; const scrollOffset = scrollOffsetRef.current!;
const lastItemElement = listItemElementsRef.current[listItemElementsRef.current.length - 1]; const lastItemElement = listItemElementsRef.current[listItemElementsRef.current.length - 1];
// If two messages come at once (e.g. via Quiz Bot) then the first message will update `scrollOffset`
// right away (before animation) which creates inconsistency until the animation completes.
// To workaround that, we calculate `isAtBottom` with a "buffer" of the latest message height (this is approximate).
const lastItemHeight = lastItemElement ? lastItemElement.offsetHeight : 0;
const isAtBottom = isViewportNewest && prevIsViewportNewest && ( const isAtBottom = isViewportNewest && prevIsViewportNewest && (
scrollOffset - (prevContainerHeight || offsetHeight) - lastItemHeight <= BOTTOM_THRESHOLD scrollOffset - (prevContainerHeight || offsetHeight) <= BOTTOM_THRESHOLD
); );
let newScrollTop!: number; let newScrollTop!: number;