add viewport checking to createChild, much more smooth experience now

fiatjaf · Sep 3, 2023 · f344a14 · f344a14
1 parent fab6836
commit f344a14
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 4 deletions.
diff --git a/src/components/Search.svelte b/src/components/Search.svelte
@@ -4,7 +4,6 @@
   import type { NDKEvent } from '@nostr-dev-kit/ndk';
   import { onMount } from 'svelte';
   import type { TabType } from '$lib/types';
-  import { stringify } from 'postcss';
 
   export let query: string;
   export let replaceSelf: (newType: TabType, newData: string) => void;

diff --git a/src/components/Tab.svelte b/src/components/Tab.svelte
@@ -29,7 +29,9 @@
       };
       const newTabs = $tabs.slice(0, index + 1).concat(newChild);
       tabs.set(newTabs);
-      scrollTabIntoView(String(newChild.id), true);
+      if (isElementInViewport(String(newChild.id))) {
+        scrollTabIntoView(String(newChild.id), true);
+      } 
     }
   }
 

diff --git a/src/lib/utils.ts b/src/lib/utils.ts
@@ -57,8 +57,11 @@ export function scrollTabIntoView(el: string | HTMLElement, wait: boolean) {
   }
 }
 
-export function isElementInViewport(el: HTMLElement) {
-  const rect = el.getBoundingClientRect();
+export function isElementInViewport(el: string | HTMLElement) {
+  const element = typeof el === 'string' ? document.querySelector(`[id^="wikitab-v0-${el}"]`) : el;
+  if (!element) return;
+
+  const rect = element.getBoundingClientRect();
 
   return (
     rect.top >= 0 &&