xt/estim_control
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

adjust ScrollArea control strategy.

Browse Source
This commit is contained in:
Vixalie 2025-03-09 12:11:20 +08:00
parent cadceea4d4
commit c9293fe90c
2 changed files with 21 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/ScrollArea.module.css
View File

@ -4,15 +4,16 @@
min-width: 0;
min-height: 0;
overflow: hidden;
padding-inline-end: calc(var(--spacing) * 2);
padding-block-end: calc(var(--spacing) * 2);
grid-template-columns: auto calc(var(--spacing) * 3);
grid-template-rows: auto calc(var(--spacing) * 3);
gap: calc(var(--spacing) * 2);
&.hide_thumb_y {
grid-template-columns: auto 0;
column-gap: 0;
}
&.hide_thumb_x {
grid-template-rows: auto 0;
row-gap: 0;
}
}
.content {

23
src/components/ScrollArea.tsx
View File

@ -177,12 +177,25 @@ export function ScrollArea({
};
useEffect(() => {
const container = scrollContainerRef.current;
if (container) {
setXScrollNeeded(container.scrollWidth > container.clientWidth);
setYScrollNeeded(container.scrollHeight > container.clientHeight);
const sizeObserver = new ResizeObserver((entries) => {
for (const entry of entries) {
const container = scrollContainerRef.current;
if (container) {
setXScrollNeeded(container.scrollWidth > container.clientWidth);
setYScrollNeeded(container.scrollHeight > container.clientHeight);
}
}
});
if (scrollContainerRef.current) {
sizeObserver.observe(scrollContainerRef.current);
}
}, [children]);
return () => {
if (scrollContainerRef.current) {
sizeObserver.unobserve(scrollContainerRef.current);
}
sizeObserver.disconnect();
};
}, []);
return (
<div