fixed scrolltop not working

mindiae · Sep 20, 2024 · 8eca5ab · 8eca5ab
1 parent 5c628eb
commit 8eca5ab
Showing 1 changed file with 7 additions and 6 deletions.
diff --git a/static/webview.html b/static/webview.html
@@ -23,8 +23,8 @@
     style="max-width: 70rem; margin-inline: auto"
     class="[&_button]:font-sans [&_button]:text-white [&_button]:border-none font-sans"
     x-data="myData"
-    x-swipe:left.threshold.100px="chapter++; window.scrollTo(0, 0)"
-    x-swipe:right.threshold.100px="chapter--; window.scrollTo(0, 0)"
+    x-swipe:left.threshold.100px="chapter++; document.getElementById('contentTop').scrollIntoView()"
+    x-swipe:right.threshold.100px="chapter--; document.getElementById('contentTop').scrollIntoView()"
   >
     <div class="sticky z-[98] top-0">
       <div id="topBar" class="!flex gap-px !justify-between flex-wrap bg-black">
@@ -49,15 +49,15 @@
 
           <button
             class="bg-gray-800 px-3 !py-[unset]"
-            x-on:click="chapter--; window.scrollTo(0, 0)"
-            x-on:keyup.left.window="chapter--; window.scrollTo(0, 0)"
+            x-on:click="chapter--; document.getElementById('contentTop').scrollIntoView()"
+            x-on:keyup.left.window="chapter--; document.getElementById('contentTop').scrollIntoView()"
           >
             <i class="fas fa-arrow-left"></i>
           </button>
           <button
             class="bg-gray-800 px-3 !py-[unset]"
-            x-on:click="chapter++; window.scrollTo(0, 0)"
-            x-on:keyup.right.window="chapter++; window.scrollTo(0, 0)"
+            x-on:click="chapter++; document.getElementById('contentTop').scrollIntoView()"
+            x-on:keyup.right.window="chapter++; document.getElementById('contentTop').scrollIntoView()"
           >
             <i class="fas fa-arrow-right"></i>
           </button>
@@ -118,6 +118,7 @@
         if (box.bottom - topbarBottom < 0 && maxColumnLength > verseNumber ) verseNumber++
         "
       >
+        <div id="contentTop"></div>
         <template x-for="verse in maxColumnLength" x-key="verse">
           <div
             class="grid gap-2 !text-nowrap"