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

Profile: Various fixes for auto-scroll

Browse Source
This commit is contained in:
Alexander Zinchuk 2025-08-21 12:05:16 +02:00
parent b66048aad2
commit 81beb4c0fd
5 changed files with 31 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/components/right/Profile.scss
View File

@ -7,12 +7,28 @@
flex-direction: column; flex-direction: column;
height: 100%; height: 100%;
border-top: 1px solid transparent;
transition: border-top-color 0.2s ease-in-out; &::before {
content: "";
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 1px;
opacity: 0;
background-color: var(--color-borders);
transition: opacity 0.2s ease-in-out;
}
&.scrolled { &.scrolled {
border-top-color: var(--color-borders); &::before {
opacity: 1;
}
} }
> .profile-info > .ChatInfo { > .profile-info > .ChatInfo {
@ -47,6 +63,7 @@
.FloatingActionButton { .FloatingActionButton {
z-index: 1; z-index: 1;
&.revealed { &.revealed {
transition-delay: 0.2s; transition-delay: 0.2s;
} }
@ -87,11 +104,11 @@
.shared-media { .shared-media {
display: flex; display: flex;
flex: 1;
flex-direction: column-reverse; flex-direction: column-reverse;
.TabList { .TabList {
z-index: 1; z-index: 1;
top: -1px;
background: var(--color-background); background: var(--color-background);
} }

6
src/components/right/hooks/useProfileState.ts
View File

@ -45,8 +45,10 @@ export default function useProfileState(
}, PROGRAMMATIC_SCROLL_TIMEOUT_MS); }, PROGRAMMATIC_SCROLL_TIMEOUT_MS);
} }
} }
}, [tabType, onProfileStateChange, containerRef, forceScrollProfileTab, }, [
allowAutoScrollToTabs, handleStopAutoScrollToTabs]); tabType, onProfileStateChange, containerRef, forceScrollProfileTab,
allowAutoScrollToTabs, handleStopAutoScrollToTabs,
]);
// Scroll to top // Scroll to top
useEffectWithPrevDeps(([prevProfileState]) => { useEffectWithPrevDeps(([prevProfileState]) => {

5
src/components/right/hooks/useTransitionFixes.ts
View File

@ -5,9 +5,6 @@ import { requestMeasure, requestMutation } from '../../../lib/fasterdom/fasterdo
import useLastCallback from '../../../hooks/useLastCallback'; import useLastCallback from '../../../hooks/useLastCallback';
// Sometimes px values are rounded
const ROUNDING_COMPENSATION_PX = 1;
export default function useTransitionFixes( export default function useTransitionFixes(
containerRef: ElementRef<HTMLDivElement>, containerRef: ElementRef<HTMLDivElement>,
transitionElSelector = '.Transition.shared-media-transition', transitionElSelector = '.Transition.shared-media-transition',
@ -19,7 +16,7 @@ export default function useTransitionFixes(
const transitionEl = container.querySelector<HTMLDivElement>(transitionElSelector); const transitionEl = container.querySelector<HTMLDivElement>(transitionElSelector);
const tabsEl = container.querySelector<HTMLDivElement>('.TabList'); const tabsEl = container.querySelector<HTMLDivElement>('.TabList');
if (transitionEl && tabsEl) { if (transitionEl && tabsEl) {
const newHeight = container.offsetHeight - tabsEl.offsetHeight + ROUNDING_COMPENSATION_PX; const newHeight = container.clientHeight - tabsEl.offsetHeight;
requestMutation(() => { requestMutation(() => {
transitionEl.style.minHeight = `${newHeight}px`; transitionEl.style.minHeight = `${newHeight}px`;

2
src/util/animateScroll.ts
View File

@ -77,7 +77,7 @@ function createMutateFunction(args: AnimateScrollArgs) {
} }
const { offsetHeight: elementHeight } = element; const { offsetHeight: elementHeight } = element;
const { scrollTop: currentScrollTop, offsetHeight: containerHeight, scrollHeight } = container; const { scrollTop: currentScrollTop, clientHeight: containerHeight, scrollHeight } = container;
const elementTop = getOffsetToContainer(element, container).top; const elementTop = getOffsetToContainer(element, container).top;
const targetContainerHeight = forceNormalContainerHeight && container.dataset.normalHeight const targetContainerHeight = forceNormalContainerHeight && container.dataset.normalHeight

5
src/util/visibility/getOffsetToContainer.ts
View File

@ -8,8 +8,11 @@ export default function getOffsetToContainer(element: HTMLElement, container: HT
offsetTop += current.offsetTop; offsetTop += current.offsetTop;
offsetLeft += current.offsetLeft; offsetLeft += current.offsetLeft;
current = current.offsetParent as HTMLElement; current = current.offsetParent as HTMLElement | null;
} }
offsetTop -= container.clientTop;
offsetLeft -= container.clientLeft;
return { top: offsetTop, left: offsetLeft }; return { top: offsetTop, left: offsetLeft };
} }