Counter: Redefine each column's height on browser resize as well
This commit is contained in:
@@ -16,18 +16,26 @@
|
|||||||
$: digits = index.split('')
|
$: digits = index.split('')
|
||||||
|
|
||||||
|
|
||||||
/*
|
// Set columns height
|
||||||
** Run code when mounted
|
const setColumnHeight = () => {
|
||||||
*/
|
|
||||||
onMount(() => {
|
|
||||||
// Set each digit column's height = its spans combined (in order to translate in tens of %)
|
// Set each digit column's height = its spans combined (in order to translate in tens of %)
|
||||||
counter.querySelectorAll('div').forEach(column => {
|
counter.querySelectorAll('div').forEach(column => {
|
||||||
const spans = column.querySelectorAll('span')
|
const spans = column.querySelectorAll('span')
|
||||||
column.style.height = spans[0].offsetHeight * spans.length + 'px'
|
column.style.height = spans[0].offsetHeight * spans.length + 'px'
|
||||||
})
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
** Run code when mounted
|
||||||
|
*/
|
||||||
|
onMount(() => {
|
||||||
|
setColumnHeight()
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<svelte:window on:resize={setColumnHeight} />
|
||||||
|
|
||||||
<div class="counter {className}" bind:this={counter}>
|
<div class="counter {className}" bind:this={counter}>
|
||||||
{#each digits as digit}
|
{#each digits as digit}
|
||||||
<div class="counter__column" style="transform: translateY(-{digit}0%);">
|
<div class="counter__column" style="transform: translateY(-{digit}0%);">
|
||||||
|
|||||||
Reference in New Issue
Block a user