mirror of
https://github.com/movie-web/movie-web.git
synced 2024-11-11 00:25:05 +01:00
Fix scrolling to center if the element is on the low end of the thingy
This commit is contained in:
parent
6d24e8aa81
commit
0193e8f0c8
@ -13,10 +13,17 @@ interface PopoutListEntryTypes {
|
||||
errored?: boolean;
|
||||
}
|
||||
|
||||
export function PopoutSection(props: {
|
||||
interface ScrollToActiveProps {
|
||||
children: React.ReactNode;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
interface PopoutSectionProps {
|
||||
children?: React.ReactNode;
|
||||
className?: string;
|
||||
}) {
|
||||
}
|
||||
|
||||
export function ScrollToActive(props: ScrollToActiveProps) {
|
||||
const ref = createRef<HTMLDivElement>();
|
||||
const inited = useRef<boolean>(false);
|
||||
|
||||
@ -43,10 +50,14 @@ export function PopoutSection(props: {
|
||||
inline: "nearest",
|
||||
});
|
||||
|
||||
const activeYPositionCentered =
|
||||
active.getBoundingClientRect().top -
|
||||
wrapper.getBoundingClientRect().top +
|
||||
active.offsetHeight / 2;
|
||||
let activeYPositionCentered = 0;
|
||||
const setActiveYPositionCentered = () => {
|
||||
activeYPositionCentered =
|
||||
active.getBoundingClientRect().top -
|
||||
wrapper.getBoundingClientRect().top +
|
||||
active.offsetHeight / 2;
|
||||
};
|
||||
setActiveYPositionCentered();
|
||||
|
||||
if (activeYPositionCentered >= wrapper.offsetHeight / 2) {
|
||||
// Check if the active element is below the vertical center line, then scroll it into center
|
||||
@ -54,17 +65,33 @@ export function PopoutSection(props: {
|
||||
top: activeYPositionCentered - wrapper.offsetHeight / 2,
|
||||
});
|
||||
}
|
||||
|
||||
setActiveYPositionCentered();
|
||||
if (activeYPositionCentered > wrapper.offsetHeight / 2) {
|
||||
// If the element is over the vertical center line, scroll to the end
|
||||
wrapper.scrollTo({
|
||||
top: wrapper.scrollHeight,
|
||||
});
|
||||
}
|
||||
}
|
||||
inited.current = true;
|
||||
}, [ref]);
|
||||
|
||||
return (
|
||||
<div className={["p-5", props.className || ""].join(" ")} ref={ref}>
|
||||
<div className={props.className} ref={ref}>
|
||||
{props.children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function PopoutSection(props: PopoutSectionProps) {
|
||||
return (
|
||||
<ScrollToActive className={["p-5", props.className || ""].join(" ")}>
|
||||
{props.children}
|
||||
</ScrollToActive>
|
||||
);
|
||||
}
|
||||
|
||||
export function PopoutListEntry(props: PopoutListEntryTypes) {
|
||||
const bg = props.isOnDarkBackground ? "bg-ash-200" : "bg-ash-400";
|
||||
const hover = props.isOnDarkBackground
|
||||
|
Loading…
Reference in New Issue
Block a user