I have a div that I want the page to scroll to when it is mounted. That div has an id which is determined in URL search params.
Not sure why, when I call document.getElementById(#${referProductId}), the result is null. Is it because of the conditional rendering? (note: referProductId exist)
Inside the script tag
let layout: "grid" | "list" = "grid"let referProductId = ""page?.subscribe(({ url }) => { // set layout value // ... similar code to below with .get("layout") const product_id = url.searchParams.get('product_id'); if (product_id) { referProductId = product_id; }});$: if (browser && referProductId) { const product = document.getElementById(`#${referProductId}`); console.log(product); // this logs null if (product) { product.scrollIntoView({ behavior: 'smooth' }); }Inside the svelte markup
<div class={cn('w-full gap-4', displayType === 'grid'&& 'grid grid-cols-2', displayType === 'list'&& 'flex flex-col' )}> {#await data.products} {#if displayType === 'grid'}<Skeleton class="aspect-square h-full w-full rounded-lg" /><Skeleton class="aspect-square h-full w-full rounded-lg" /> {:else if displayType === 'list'}<div class="flex w-full flex-col gap-4"><Skeleton class="h-16 w-full rounded-lg" /><Skeleton class="h-16 w-full rounded-lg" /></div> {/if} {:then products} {#each products as product, i} {#if displayType === 'grid'}<div id={String(product.id)} in:fly={{ y: -40, opacity: 0, delay: i * 100, duration: 250, easing: cubicInOut }}><component /></div> {:else if displayType === 'list'}<div id={String(product.id)} in:fly={{ y: -40, opacity: 0, delay: i * 100, duration: 250, easing: cubicInOut }}><component /></div> {/if} {/each} {:catch error}<p>Error loading products</p> {/await}
