Set Shop nav left scroll of current link if further than half of viewport width
This commit is contained in:
@@ -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 })}>
|
||||
|
||||
Reference in New Issue
Block a user