Fixed issue with infinite scrolling on mobile

randombits-dev · Dec 13, 2023 · 77f46b5 · 77f46b5
1 parent 9c4b376
commit 77f46b5
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 15 deletions.
diff --git a/src/components/Category.ts b/src/components/Category.ts
@@ -6,6 +6,7 @@ const TEMPLATE = `
     <div class="title-total"></div>
   </div>
     <div class="card-list"></div>
+    <div id="nextPage"></div>
 `;
 
 export class CategoryProjects extends HTMLElement {
@@ -53,11 +54,20 @@ export class CategoryProjects extends HTMLElement {
       const percent = scrollTop / (scrollHeight - clientHeight);
       const itemPercent = Math.round(percent * Math.min(index, projects.length) / projects.length * 100);
       this.querySelector('.title-percent')!.innerHTML = itemPercent + '% viewed';
+    });
 
-      if (clientHeight + scrollTop >= scrollHeight - 50) {
-        renderProjects();
-      }
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach(entry => {
+        if (entry.isIntersecting) {
+          renderProjects();
+        }
+      });
+    }, {
+      root: null,
+      rootMargin: '0px',
+      threshold: 0.1
     });
+    observer.observe(this.querySelector('#nextPage')!);
   }
 }
 

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -49,7 +49,6 @@ const twitterSVG = await fetch('https://storage.googleapis.com/randombits/images
                     <div>Brought to you by</div>
                     <div class="rb">Random Bits</div>
                     </div>
-                    </a>
                 </a>
 
                 <div class="social-links">
@@ -65,16 +64,6 @@ const twitterSVG = await fetch('https://storage.googleapis.com/randombits/images
                 </div>
 
             </div>
-            <!--<div class="footer-section">-->
-            <!--    <div class="footer-section-title">Docs</div>-->
-            <!--</div>-->
-            <!--<div class="footer-section">-->
-            <!--    <div class="footer-section-title">Contact</div>-->
-            <!--    <a href="https://twitter.com/RandomBitsDev">Twitter (X)</a>-->
-            <!--    <a href="https://discord.gg/drHPTNuk">Discord</a>-->
-            <!--    <a href="https://github.com/randombits-dev/micro-storage">Github</a>-->
-            <!--</div>-->
-        </div>
 
     </footer>
 </Layout>

diff --git a/src/styles/global.css b/src/styles/global.css
@@ -1,6 +1,9 @@
+html, body {
+    overflow-x: clip;
+}
+
 body {
     font-family: 'League Spartan', sans-serif;
-    /*background: #eee;*/
     color: #333;
     margin: 0;
     padding: 0;
@@ -212,3 +215,7 @@ button {
     width: 32px;
     height: 32px;
 }
+
+#nextPage {
+    height: 50px;
+}