sinvo/docmost
1
0
Fork 0
mirror of https://github.com/docmost/docmost.git synced 2026-08-31 10:55:29 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(base): make column headers sticky in standalone and inline contexts

Browse Source 
Split the unified .gridWrapper into a sticky band (containing column
headers, plus banner + toolbar in inline) and a body grid that owns
horizontal scroll. The band's vertical sticky anchor is automatic CSS:
the table's scrollport in standalone, the page in inline. A small
useHorizontalScrollSync hook mirrors body scrollLeft onto the header
and turns wheel-on-header into pan-on-body.
This commit is contained in:
Philipinho
2026-04-27 20:25:13 +01:00
parent 1cfd0fb2c4
commit cd8d1e0ed8
8 changed files with 277 additions and 172 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/client/src/features/base/hooks/use-horizontal-scroll-sync.ts
+6 -1
View File
@@ -42,11 +42,16 @@ export function useHorizontalScrollSync<
// scrollLeft. Convert vertical wheel ticks into horizontal pan.
if (Math.abs(e.deltaX) > Math.abs(e.deltaY)) return;
if (e.deltaY === 0) return;
// Suppress the browser's default vertical scroll on the page
// (or the standalone scrollport) — we're consuming this wheel
// event as a horizontal pan, not a vertical scroll. Requires a
// non-passive listener (configured below).
e.preventDefault();
body.scrollLeft += e.deltaY;
};
body.addEventListener("scroll", onBodyScroll, { passive: true });
header.addEventListener("wheel", onHeaderWheel, { passive: true });
header.addEventListener("wheel", onHeaderWheel, { passive: false });
// Initial sync — covers the case where body is already scrolled
// when the hook mounts (e.g. after a route change).