Set Shop nav left scroll of current link if further than half of viewport width

This commit is contained in:
2022-09-20 10:59:19 +02:00
parent 1c50f36f0d
commit 7c5808e7db

View File

@@ -20,7 +20,7 @@
const { shop, shopLocations }: any = getContext('shop')
let navObserver: IntersectionObserver
let introEl: HTMLElement
let introEl: HTMLElement, navChooseEl: HTMLElement
let scrolledPastIntro = false
@@ -36,6 +36,14 @@
})
navObserver.observe(introEl)
// Set navigation horizontal scroll depending on current link position
const navChooseActive: HTMLElement = navChooseEl.querySelector('.is-active')
const offsetLeft = navChooseActive.offsetLeft
if (offsetLeft > window.innerWidth / 2) {
navChooseEl.scrollLeft = offsetLeft
}
/**
* Animations
@@ -114,7 +122,7 @@
<div class="container">
<p class="text-label">Choose a city</p>
<nav>
<ul data-sveltekit-noscroll data-sveltekit-prefetch>
<ul data-sveltekit-noscroll data-sveltekit-prefetch bind:this={navChooseEl}>
{#each shopLocations as { name, slug }}
<li class:is-active={product && slug === product.location.slug}>
<a href="/shop/poster-{slug}" on:click={() => $smoothScroll.scrollTo('#poster', { duration: 2 })}>