danog/telegram-tt
1
0
Fork 0
mirror of https://github.com/danog/telegram-tt.git synced 2025-01-22 05:11:55 +01:00
Code Issues Packages Projects Releases Wiki Activity

Message List: Fix scroll jumps

Browse Source
This commit is contained in:
Alexander Zinchuk 2021-12-25 12:41:02 +01:00
parent cdf291933d
commit ab9cef0f13
7 changed files with 55 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/middle/MessageList.scss
View File

@ -5,7 +5,6 @@
width: 100%;
margin-bottom: .5rem;
overflow-anchor: none;
overflow: scroll;
overflow-x: hidden;
overflow-y: auto;

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

@ -42,7 +42,7 @@ import { preventMessageInputBlur } from './helpers/preventMessageInputBlur';
import useOnChange from '../../hooks/useOnChange';
import useStickyDates from './hooks/useStickyDates';
import { dispatchHeavyAnimationEvent } from '../../hooks/useHeavyAnimationCheck';
import resetScroll from '../../util/resetScroll';
import resetScroll, { patchChromiumScroll } from '../../util/resetScroll';
import fastSmoothScroll, { isAnimatingScroll } from '../../util/fastSmoothScroll';
import renderText from '../common/helpers/renderText';
import useLang from '../../hooks/useLang';
@ -210,12 +210,17 @@ const MessageList: FC<OwnProps & StateProps & DispatchProps> = ({
const { isScrolled, updateStickyDates } = useStickyDates();
const isScrollingRef = useRef<boolean>();
const isScrollPatchNeededRef = useRef<boolean>();
const handleScroll = useCallback(() => {
if (isScrollTopJustUpdatedRef.current) {
isScrollTopJustUpdatedRef.current = false;
return;
}
isScrollingRef.current = true;
const container = containerRef.current!;
if (!memoFocusingIdRef.current) {
@ -223,6 +228,8 @@ const MessageList: FC<OwnProps & StateProps & DispatchProps> = ({
}
runDebouncedForScroll(() => {
isScrollingRef.current = false;
fastRaf(() => {
if (!container.parentElement) {
return;
@ -320,7 +327,7 @@ const MessageList: FC<OwnProps & StateProps & DispatchProps> = ({
const container = containerRef.current!;
listItemElementsRef.current = Array.from(container.querySelectorAll<HTMLDivElement>('.message-list-item'));
// During animation
// TODO Consider removing
if (!container.offsetParent) {
return;
}
@ -355,6 +362,7 @@ const MessageList: FC<OwnProps & StateProps & DispatchProps> = ({
}
const { scrollTop, scrollHeight, offsetHeight } = container;
// TODO Consider `scrollOffset = scrollHeight - scrollTop`
const scrollOffset = scrollOffsetRef.current!;
const lastItemElement = listItemElementsRef.current[listItemElementsRef.current.length - 1];
@ -397,6 +405,7 @@ const MessageList: FC<OwnProps & StateProps & DispatchProps> = ({
}
const isResized = prevContainerHeight !== undefined && prevContainerHeight !== containerHeight;
// TODO Look up within active transition slide
const anchor = anchorIdRef.current && document.getElementById(anchorIdRef.current);
const unreadDivider = (
!anchor
@ -411,6 +420,11 @@ const MessageList: FC<OwnProps & StateProps & DispatchProps> = ({
newScrollTop = scrollHeight - offsetHeight;
} else if (anchor) {
if (isScrollPatchNeededRef.current) {
isScrollPatchNeededRef.current = false;
patchChromiumScroll(container);
}
const newAnchorTop = anchor.getBoundingClientRect().top;
newScrollTop = scrollTop + (newAnchorTop - (anchorTopRef.current || 0));
} else if (unreadDivider) {
@ -515,6 +529,8 @@ const MessageList: FC<OwnProps & StateProps & DispatchProps> = ({
threadId={threadId}
type={type}
isReady={isReady}
isScrollingRef={isScrollingRef}
isScrollPatchNeededRef={isScrollPatchNeededRef}
threadTopMessageId={threadTopMessageId}
hasLinkedChat={hasLinkedChat}
isSchedule={messageGroups ? type === 'scheduled' : false}

6
src/components/middle/MessageListContent.tsx
View File

@ -31,6 +31,8 @@ interface OwnProps {
threadId: number;
type: MessageListType;
isReady: boolean;
isScrollingRef: { current: boolean | undefined };
isScrollPatchNeededRef: { current: boolean | undefined };
threadTopMessageId: number | undefined;
hasLinkedChat: boolean | undefined;
isSchedule: boolean;
@ -56,6 +58,8 @@ const MessageListContent: FC<OwnProps> = ({
threadId,
type,
isReady,
isScrollingRef,
isScrollPatchNeededRef,
threadTopMessageId,
hasLinkedChat,
isSchedule,
@ -83,6 +87,8 @@ const MessageListContent: FC<OwnProps> = ({
onFabToggle,
onNotchToggle,
isReady,
isScrollingRef,
isScrollPatchNeededRef,
);
const lang = useLang();

15
src/components/middle/hooks/useScrollHooks.ts
View File

@ -5,10 +5,11 @@ import { useMemo, useRef } from '../../../lib/teact/teact';
import { LoadMoreDirection } from '../../../types';
import { MessageListType } from '../../../global/types';
import { LOCAL_MESSAGE_ID_BASE, MESSAGE_LIST_SLICE } from '../../../config';
import { IS_MAC_OS, IS_SCROLL_PATCH_NEEDED, MESSAGE_LIST_SENSITIVE_AREA } from '../../../util/environment';
import { debounce } from '../../../util/schedulers';
import { useIntersectionObserver, useOnIntersect } from '../../../hooks/useIntersectionObserver';
import { LOCAL_MESSAGE_ID_BASE, MESSAGE_LIST_SENSITIVE_AREA } from '../../../config';
import resetScroll from '../../../util/resetScroll';
import { useIntersectionObserver, useOnIntersect } from '../../../hooks/useIntersectionObserver';
import useOnChange from '../../../hooks/useOnChange';
const FAB_THRESHOLD = 50;
@ -24,6 +25,8 @@ export default function useScrollHooks(
onFabToggle: AnyToVoidFunction,
onNotchToggle: AnyToVoidFunction,
isReady: boolean,
isScrollingRef: { current: boolean | undefined },
isScrollPatchNeededRef: { current: boolean | undefined },
) {
const { loadViewportMessages } = getDispatch();
@ -91,9 +94,17 @@ export default function useScrollHooks(
const { target } = triggerEntry;
if (target.className === 'backwards-trigger') {
if (
IS_SCROLL_PATCH_NEEDED && isScrollingRef.current && messageIds.length <= MESSAGE_LIST_SLICE
) {
isScrollPatchNeededRef.current = true;
}
// TODO Consider removing
resetScroll(containerRef.current!);
loadMoreBackwards();
} else if (target.className === 'forwards-trigger') {
// TODO Consider removing
resetScroll(containerRef.current!);
loadMoreForwards();
}

1
src/config.ts
View File

@ -41,7 +41,6 @@ const isBigScreen = typeof window !== 'undefined' && window.innerHeight >= 900;
export const MIN_PASSWORD_LENGTH = 1;
export const MESSAGE_LIST_SENSITIVE_AREA = 750;
export const MESSAGE_LIST_SLICE = isBigScreen ? 60 : 40;
export const MESSAGE_LIST_VIEWPORT_LIMIT = MESSAGE_LIST_SLICE * 2;

13
src/util/environment.ts
View File

@ -39,9 +39,11 @@ export const IS_MAC_OS = PLATFORM_ENV === 'macOS';
export const IS_IOS = PLATFORM_ENV === 'iOS';
export const IS_ANDROID = PLATFORM_ENV === 'Android';
export const IS_SAFARI = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
export const IS_PWA = window.matchMedia('(display-mode: standalone)').matches
|| (window.navigator as any).standalone
|| document.referrer.includes('android-app://');
export const IS_PWA = (
window.matchMedia('(display-mode: standalone)').matches
|| (window.navigator as any).standalone
|| document.referrer.includes('android-app://')
);
export const IS_TOUCH_ENV = window.matchMedia('(pointer: coarse)').matches;
// Keep in mind the landscape orientation
@ -82,3 +84,8 @@ if (IS_MOV_SUPPORTED) SUPPORTED_VIDEO_CONTENT_TYPES.add(VIDEO_MOV_TYPE);
export const DPR = window.devicePixelRatio || 1;
export const MASK_IMAGE_DISABLED = true;
export const IS_SCROLL_PATCH_NEEDED = !IS_MAC_OS && !IS_IOS && !IS_ANDROID;
// Smaller area reduces scroll jumps caused by `patchChromiumScroll`
export const MESSAGE_LIST_SENSITIVE_AREA = IS_SCROLL_PATCH_NEEDED ? 300 : 750;

8
src/util/resetScroll.ts
View File

@ -1,4 +1,5 @@
import { IS_IOS } from './environment';
import forceReflow from './forceReflow';
export default (container: HTMLDivElement, scrollTop?: number) => {
if (IS_IOS) {
@ -13,3 +14,10 @@ export default (container: HTMLDivElement, scrollTop?: number) => {
container.style.overflow = '';
}
};
// Workaround for https://bugs.chromium.org/p/chromium/issues/detail?id=1264266
export function patchChromiumScroll(element: HTMLElement) {
element.style.display = 'none';
forceReflow(element);
element.style.display = '';
}