GauthierWebDev/memento-dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: Improve scroll calculation in ReadProgressBar

Browse Source
This commit is contained in:
Gauthier Daniels 2025-04-21 16:44:27 +02:00
parent 14f308f33e
commit 6e7eeb7dc0
2 changed files with 19 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
app/partials/ReadProgressBar.tsx
View File

@ -8,16 +8,28 @@ export function ReadProgressBar() {
const [width, setWidth] = createSignal("0%"); const [width, setWidth] = createSignal("0%");
const handleScroll = () => { const handleScroll = () => {
const scrollTop = window.scrollY; const articleHeight = articleContentElement.scrollHeight;
const pageHeight = document.documentElement.scrollHeight; const articleTopPosition =
const scrollHeight = articleContentElement.scrollHeight; articleContentElement.getBoundingClientRect().top;
const windowHeight = window.innerHeight;
const gapWithBottom = pageHeight - scrollHeight; // Calculer la hauteur visible de l'élément dans la fenêtre
const scrollableHeight = pageHeight - gapWithBottom; const visibleHeight = Math.min(
articleHeight,
windowHeight + articleTopPosition,
);
const scrollPercentage = Math.round((scrollTop / scrollableHeight) * 100); // Calculer la position de défilement relative à l'élément
const elementScrollTop = -articleTopPosition;
setWidth(`${scrollPercentage}%`); // Calculer le pourcentage de défilement relatif à l'élément
const percentage =
(elementScrollTop / (articleHeight - windowHeight)) * 100;
// Limiter le pourcentage entre 0 et 100
const clampedPercentage = Math.max(0, Math.min(100, percentage));
setWidth(`${clampedPercentage}%`);
}; };
createEffect(() => { createEffect(() => {

1
app/partials/TableOfContents.tsx
View File

@ -21,7 +21,6 @@ export function TableOfContents() {
if (!section.hash) return null; if (!section.hash) return null;
const el = document.getElementById(section.hash); const el = document.getElementById(section.hash);
console.log(section.hash, el);
if (!el) return null; if (!el) return null;
const style = window.getComputedStyle(el); const style = window.getComputedStyle(el);