Tengo una variable que obtiene la altura de la barra de desplazamiento cuando overflow-x-auto y estoy usando un framework javascript esbelto.

para resolver este problema utilicé este código:

 <script>
 let hWith = 0;
 let hNot = 0;

 $: scrollBarHeight = hWith - hNot;
</script>

<div 
 bind:offsetHeight={hWith} 
 bind:clientHeight={hNot}
>
 my content...
</div>

y está funcionando bien y salidas: 17

el problema es que bind: siempre se disparará en cada renderizado.

Como sabe, una barra de desplazamiento no cambiará mágicamente el tamaño, por lo que no es importante recalcular siempre el valor de la altura.

una vez que obtengamos el valor 17 (que puede ser diferente según el navegador), deje de volver a calcular.

y donde esta el problema

el problema es que la variable debe ser reactiva con $:
al principio,
porque dado que el contenedor no se desbordará, esto significa que es 0

pero una vez que obtenemos un número mayor que 0. (valor returnedValue > 0 )
la variable ya no necesita ser reactiva

Básicamente quiero que cuando guarde scrollBarHeight (un cálculo simple hWith - hNot ), no lo calcule más.

sabes que no me gusta el hecho de que no puedo escribir directamente la fórmula dentro de una variable en lugar de 3.

con bind: siempre establecerá la variable con el nuevo valor. (eso puede ser ineficiente ya que el valor no cambia mucho)

❌

 let hWith = 0;
let hNot = 0;

$: scrollBarHeight = hWith - hNot;

✅ algo así.

 $: scrollBarHeight = if (div.offsetHeight - div.clientHeight > 0) { 
 // logic/code to make this variable not reactive anymore
 return div.offsetHeight - div.clientHeight;
}

¿Por qué lo necesito?

esta lógica es un niño, no el cuerpo. entonces es por eso que algo se está desbordando. y necesito ese valor para corregir algunos errores.

el problema es que el niño cambia mucho y se vuelve a representar y esto tal vez pueda volver a representar y también vincular mucho los valores.