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