colin/colibre
1
0
Fork 0
Code Issues 30 Pull Requests Actions Packages Projects Releases 33 Activity

fix(tableaux): option A — sync barre avec window.scrollX + style orange #82

Browse Source 
Abandonne le wrapper overflow-x (incompatible avec position:sticky des
en-têtes). La barre contrôle désormais le scroll horizontal de la page
via window.scrollTo/scrollX, ce qui préserve le sticky des th.
Scrollbar orange 12px, styling webkit + Firefox.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Colin Maudry
2026-06-23 18:22:08 +02:00
parent 817aeedc6f
commit 099fba58f7
2 changed files with 30 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/table_hscroll.js
+13 -17
View File
@@ -12,45 +12,41 @@
// qui déclencherait rootObs et provoquerait une re-entrée dans setup().
wrapper.dataset.hscrollReady = "1";
// Injecter le conteneur scrollable horizontal autour du conteneur Dash
const scrollWrapper = document.createElement("div");
scrollWrapper.className = "dt-scroll-wrapper";
dashContainer.parentNode.insertBefore(scrollWrapper, dashContainer);
scrollWrapper.appendChild(dashContainer);
// Injecter la barre de défilement en haut, avant le wrapper scrollable
const bar = document.createElement("div");
bar.className = "dt-hscroll is-hidden";
const inner = document.createElement("div");
inner.className = "dt-hscroll-inner";
bar.appendChild(inner);
wrapper.insertBefore(bar, scrollWrapper);
wrapper.insertBefore(bar, wrapper.firstChild);
// syncing évite les boucles dans la même pile d'exécution ; l'affectation de scrollLeft
// déclenche l'événement scroll de façon synchrone dans Chromium.
// La barre synchronise le scroll horizontal de la page (overflow: visible sur les
// conteneurs Dash laisse le scroll se faire au niveau de la page, ce qui permet
// aux en-têtes position:sticky de rester calés sur la fenêtre).
// syncing évite les boucles dans la même pile d'exécution.
let syncing = false;
const onBar = () => {
if (syncing) return;
syncing = true;
scrollWrapper.scrollLeft = bar.scrollLeft;
window.scrollTo(bar.scrollLeft, window.scrollY);
syncing = false;
};
const onTable = () => {
const onPage = () => {
if (syncing) return;
syncing = true;
bar.scrollLeft = scrollWrapper.scrollLeft;
bar.scrollLeft = window.scrollX;
syncing = false;
};
bar.addEventListener("scroll", onBar);
scrollWrapper.addEventListener("scroll", onTable);
// SPA : ce listener est intentionnellement conservé pour toute la durée de vie de la page.
window.addEventListener("scroll", onPage);
const refresh = () => {
const total = scrollWrapper.scrollWidth;
const visible = scrollWrapper.clientWidth;
const total = document.documentElement.scrollWidth;
const visible = window.innerWidth;
inner.style.width = total + "px";
// +1 absorbe les erreurs d'arrondi sous-pixel
bar.classList.toggle("is-hidden", total <= visible + 1);
bar.scrollLeft = scrollWrapper.scrollLeft;
bar.scrollLeft = window.scrollX;
};
// Recalcule quand le tableau change (pagination, tri, filtre, données).