Workaround fix to auto-hide scrollbar in Foliate viewer

johnfactotum · Dec 2, 2024 · 1a3b141 · 1a3b141
1 parent 2d02081
commit 1a3b141
Showing 1 changed file with 11 additions and 2 deletions.
diff --git a/paginator.js b/paginator.js
@@ -279,12 +279,11 @@ class View {
         if (this.#column) this.columnize(layout)
         else this.scrolled(layout)
     }
-    scrolled({ gap, columnWidth }) {
+    scrolled({ columnWidth }) {
         const vertical = this.#vertical
         const doc = this.document
         setStylesImportant(doc.documentElement, {
             'box-sizing': 'border-box',
-            'padding': vertical ? `${gap}px 0` : `0 ${gap}px`,
             'column-width': 'auto',
             'height': 'auto',
             'width': 'auto',
@@ -697,8 +696,18 @@ export class Paginator extends HTMLElement {
             this.feet = null
             this.#header.replaceChildren()
             this.#footer.replaceChildren()
+            // FIXME: this is a hack to make the scrollbar auto-hide
+            // with padding in container other than the iframe
+            // container could grab the mouseleave event and hide the scrollbar
+            Object.assign(this.#container.style, {
+                'padding': vertical ? `${gap}px 0` : `0 ${gap}px`,
+            })
 
             return { flow, margin, gap, columnWidth }
+        } else {
+            Object.assign(this.#container.style, {
+                'padding': '0px',
+            })
         }
 
         const divisor = Math.min(maxColumnCount, Math.ceil(size / maxInlineSize))