fix: ignore footer element for scroll calculation (#361)

ttu-ttu · Aug 28, 2024 · 2b1ecc9 · 2b1ecc9
1 parent f8155ef
commit 2b1ecc9
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 3 deletions.
diff --git a/apps/web/src/lib/components/book-reader/book-reader-continuous/book-reader-continuous.svelte b/apps/web/src/lib/components/book-reader/book-reader-continuous/book-reader-continuous.svelte
@@ -304,12 +304,21 @@
       return { scroll: true, rect };
     }
 
+    const footerElement = verticalMode ? null : document.getElementById('ttu-page-footer');
     const {
       elTopReferencePoint,
       elLeftReferencePoint,
       elBottomReferencePoint,
       elRightReferencePoint
-    } = getReferencePoints(window, contentEl, verticalMode, firstDimensionMargin);
+    } = getReferencePoints(
+      window,
+      contentEl,
+      verticalMode,
+      firstDimensionMargin,
+      !verticalMode && footerElement
+        ? Number.parseFloat(getComputedStyle(footerElement).height.replace('px', ''))
+        : 0
+    );
 
     if (verticalMode) {
       return {

diff --git a/apps/web/src/lib/functions/range-util.ts b/apps/web/src/lib/functions/range-util.ts
@@ -80,7 +80,8 @@ export function getReferencePoints(
   window: Window,
   element: Element,
   verticalMode: boolean,
-  firstDimensionMarginValue: number
+  firstDimensionMarginValue: number,
+  bottomGap = 0
 ) {
   const firstDimensionMargin = Math.min(
     Math.max(firstDimensionMarginValue, 0),
@@ -94,7 +95,7 @@ export function getReferencePoints(
   const elTopReferencePoint = verticalMode ? rect.top : firstDimensionMargin;
   const elBottomReferencePoint = verticalMode
     ? rect.bottom
-    : window.innerHeight - firstDimensionMargin;
+    : window.innerHeight - firstDimensionMargin - bottomGap;
   const pointGap = Number(getComputedStyle(element).lineHeight.replace(/px$/, ''));
 
   return {

diff --git a/apps/web/src/routes/b/+page.svelte b/apps/web/src/routes/b/+page.svelte
@@ -1621,6 +1621,7 @@
 {/if}
 
 <div
+  id="ttu-page-footer"
   tabindex="0"
   role="button"
   class="writing-horizontal-tb fixed bottom-0 left-0 z-10 flex h-8 w-full items-center justify-between text-xs leading-none"