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')
|
const { shop, shopLocations }: any = getContext('shop')
|
||||||
|
|
||||||
let navObserver: IntersectionObserver
|
let navObserver: IntersectionObserver
|
||||||
let introEl: HTMLElement
|
let introEl: HTMLElement, navChooseEl: HTMLElement
|
||||||
let scrolledPastIntro = false
|
let scrolledPastIntro = false
|
||||||
|
|
||||||
|
|
||||||
@@ -36,6 +36,14 @@
|
|||||||
})
|
})
|
||||||
navObserver.observe(introEl)
|
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
|
* Animations
|
||||||
@@ -114,7 +122,7 @@
|
|||||||
<div class="container">
|
<div class="container">
|
||||||
<p class="text-label">Choose a city</p>
|
<p class="text-label">Choose a city</p>
|
||||||
<nav>
|
<nav>
|
||||||
<ul data-sveltekit-noscroll data-sveltekit-prefetch>
|
<ul data-sveltekit-noscroll data-sveltekit-prefetch bind:this={navChooseEl}>
|
||||||
{#each shopLocations as { name, slug }}
|
{#each shopLocations as { name, slug }}
|
||||||
<li class:is-active={product && slug === product.location.slug}>
|
<li class:is-active={product && slug === product.location.slug}>
|
||||||
<a href="/shop/poster-{slug}" on:click={() => $smoothScroll.scrollTo('#poster', { duration: 2 })}>
|
<a href="/shop/poster-{slug}" on:click={() => $smoothScroll.scrollTo('#poster', { duration: 2 })}>
|
||||||
|
|||||||
Reference in New Issue
Block a user