Tengo la siguiente estructura (simplificada):
DIV 1 (changing height because of an accordion) –––-- DIV 2 (getting pushed down, offsetTop changing accordingly)Quiero asignar offsetTop a una variable reactiva en Svelte para poder hacer cálculos basados en el offsetTop actual de DIV 2.
Lo que he probado:
<script> let mapContainer; $: map_offset = mapContainer?.offsetTop; </script> <div id="div1"> <!-- more going on here --> </div> <div id="div2" bind:this={mapContainer}> {map_offset} </div>Utilicé el encadenamiento opcional para evitar el siguiente error:
TypeError: no se pueden leer las propiedades de undefined (leyendo 'offsetTop')
Ya no recibo errores y map_offset se completa con un valor cuando se carga la página, pero no cambia cuando DIV 1 cambia su altura, aunque verifiqué que mapContainer.offsetTop ha cambiado. ¿Que puedo hacer?
Su código se ve perfectamente bien y debería funcionar en mi opinión. Lo hubiera escrito de la misma manera, y no puedo entender por qué la declaración reactiva no se ejecuta.
Esperemos que a alguien más se le ocurra una explicación.
Mientras tanto, todo lo que puedo ofrecer es una solución usando afterUpdate que es una función de ciclo de vida de Svelte que se llama cada vez que se actualiza el componente:
<script> import { afterUpdate } from 'svelte'; let mapContainer; let map_offset; // needs to be declared if you comment out the reactive statement // $: map_offset = mapContainer?.offsetTop; afterUpdate(() => { map_offset = mapContainer.offsetTop; }); </script> <div id="div1"> <!-- more going on here --> </div> <div id="div2" bind:this={mapContainer}> {map_offset} </div>