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

Message List: Improve scroll notch

Browse Source
This commit is contained in:
Alexander Zinchuk 2021-05-31 17:22:59 +03:00
parent bf4ff6355a
commit 81f12ddb2f
3 changed files with 7 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/middle/MessageScroll.tsx
View File

@ -49,7 +49,7 @@ const MessageScroll: FC<OwnProps> = ({
// eslint-disable-next-line no-null/no-null
const fabTriggerRef = useRef<HTMLDivElement>(null);
const updateFabVisibility = useCallback(() => {
const toggleScrollTools = useCallback(() => {
if (isFabFrozen) {
return;
}
@ -69,7 +69,7 @@ const MessageScroll: FC<OwnProps> = ({
const { offsetHeight, scrollHeight, scrollTop } = containerRef.current!;
const scrollBottom = scrollHeight - scrollTop - offsetHeight;
const isNearBottom = scrollBottom <= FAB_THRESHOLD;
const isAtBottom = scrollBottom === 0 || (IS_SAFARI && scrollBottom === 1);
const isAtBottom = scrollBottom <= 0 || (IS_SAFARI && scrollBottom <= 1);
onFabToggle(firstUnreadId ? !isAtBottom : !isNearBottom);
onNotchToggle(!isAtBottom);
@ -113,9 +113,7 @@ const MessageScroll: FC<OwnProps> = ({
} = useIntersectionObserver({
rootRef: containerRef,
margin: FAB_THRESHOLD,
}, () => {
updateFabVisibility();
});
}, toggleScrollTools);
useOnIntersect(fabTriggerRef, observeIntersectionForFab);
@ -123,9 +121,7 @@ const MessageScroll: FC<OwnProps> = ({
observe: observeIntersectionForNotch,
} = useIntersectionObserver({
rootRef: containerRef,
}, () => {
updateFabVisibility();
});
}, toggleScrollTools);
useOnIntersect(fabTriggerRef, observeIntersectionForNotch);
@ -150,7 +146,7 @@ const MessageScroll: FC<OwnProps> = ({
}, [messageIds]);
// Workaround for stuck FAB when many unread messages
useEffect(updateFabVisibility, [firstUnreadId]);
useEffect(toggleScrollTools, [firstUnreadId]);
return (
<div className={className} teactFastList>

2
src/components/middle/MiddleColumn.scss
View File

@ -265,7 +265,7 @@
height: 1px;
background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 2%, rgba(255, 255, 255, 0.4) 98%, rgba(255, 255, 255, 0) 100%);
opacity: 0;
transition: opacity 200ms ease;
transition: opacity 150ms ease;
@media (max-width: 600px) {
left: -2%;

2
src/util/fastSmoothScroll.ts
View File

@ -44,7 +44,6 @@ export default function fastSmoothScroll(
isAnimating = true;
fastRaf(() => {
dispatchHeavyAnimationEvent(MAX_JS_DURATION);
scrollWithJs(container, element, position, margin, forceDuration, forceCurrentContainerHeight);
});
}
@ -99,6 +98,7 @@ function scrollWithJs(
);
const startAt = Date.now();
dispatchHeavyAnimationEvent(duration);
animateSingle(() => {
const t = Math.min((Date.now() - startAt) / duration, 1);