function map(x, a1, a2, b1, b2){
    return ((x - a1) * (b2 - b1)) / (a2 - a1) + b1;
}

<script setup>
// La funció
function map(x, a1, a2, b1, b2){
    return ((x - a1) * (b2 - b1)) / (a2 - a1) + b1;
}

// Variables necessàries
const maxScroll = ref(500)
const minWidth = ref(25)
const maxWidth = ref(80)
const currentWidth = ref(25)

// Flag per evitar múltiples actualitzacions dins del mateix cicle d'animació
let ticking = false;

// Funció que actualitza l'amplada segons la posició de l'scroll
const updateWidth = () => {
    const scroll = window.scrollY

    // Limita el valor de l'scroll entre 0 i maxScroll.value
    const clamped = Math.min(Math.max(scroll, 0), maxScroll.value)

    // Converteix la posició de l'scroll en una amplada amb la funció map
    currentWidth.value = map(clamped, 0, maxScroll.value, minWidth.value, maxWidth.value)

    // Permet noves actualitzacions al proper frame
    ticking = false
}

// Funció que s'executa cada vegada que hi ha un scroll
const onScroll = () => {
    // Només actualitza si no s'està executant ja un cicle de requestAnimationFrame
    if (!ticking) {
        requestAnimationFrame(updateWidth)
        ticking = true
    }
}

// S'afegeix l'event listener quan el component es munta
onMounted(() => {
    window.addEventListener('scroll', onScroll)
})

// Es treu l'event listener quan el component es desmunta
onUnmounted(() => {
    window.removeEventListener('scroll', onScroll)
})
</script>
<template>
  <div :style="{width: currentWidth + '%'}">
    Contingut
  </div>
</template>