Mirrors/movie-web
2
0
Fork 0
mirror of https://github.com/movie-web/movie-web.git synced 2024-11-11 01:55:05 +01:00
Code Issues Packages Projects Releases Wiki Activity

Fix PopoutSection scrolling to center

Browse Source
This commit is contained in:
Jip Fr 2023-02-09 12:44:11 +01:00
parent f14606e579
commit 6d24e8aa81
1 changed files with 26 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/video/components/popouts/PopoutUtils.tsx
View File

@ -24,16 +24,36 @@ export function PopoutSection(props: {
useEffect(() => { useEffect(() => {
if (inited.current) return; if (inited.current) return;
if (!ref.current) return; if (!ref.current) return;
const el = ref.current as HTMLDivElement; const el = ref.current as HTMLDivElement;
const active: HTMLDivElement | null = el.querySelector(".active");
if (active) { // Find nearest scroll container, or self
active?.scrollIntoView({ const wrapper: HTMLDivElement | null = el.classList.contains(
"overflow-y-auto"
)
? el
: el.closest(".overflow-y-auto");
const active: HTMLDivElement | null | undefined =
wrapper?.querySelector(".active");
if (wrapper && active) {
active.scrollIntoView({
block: "nearest", block: "nearest",
inline: "nearest", inline: "nearest",
}); });
el.scrollTo({
top: el.scrollTop + el.offsetHeight / 2 - active.offsetHeight / 2, const activeYPositionCentered =
}); active.getBoundingClientRect().top -
wrapper.getBoundingClientRect().top +
active.offsetHeight / 2;
if (activeYPositionCentered >= wrapper.offsetHeight / 2) {
// Check if the active element is below the vertical center line, then scroll it into center
wrapper.scrollTo({
top: activeYPositionCentered - wrapper.offsetHeight / 2,
});
}
} }
inited.current = true; inited.current = true;
}, [ref]); }, [ref]);