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

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

// Variables necesarias
const maxScroll = ref(500)
const minWidth = ref(25)
const maxWidth = ref(80)
const currentWidth = ref(25)

// Flag para evitar múltiples actualizaciones dentro del mismo ciclo de animación
let ticking = false;

// Función que actualiza el ancho basado en la posición del scroll
const updateWidth = () => {
    const scroll = window.scrollY

    // Limita el valor del scroll entre 0 y maxScroll.value
    const clamped = Math.min(Math.max(scroll, 0), maxScroll.value)

    // Convierte la posición del scroll en un ancho usando la función map
    currentWidth.value = map(clamped, 0, maxScroll.value, minWidth.value, maxWidth.value)

    // Permite nuevas actualizaciones en el próximo frame
    ticking = false
}

// Función que se ejecuta cada vez que ocurre un scroll
const onScroll = () => {
    // Solo actualiza si no se está ya ejecutando un ciclo de requestAnimationFrame
    if (!ticking) {
        requestAnimationFrame(updateWidth)
        ticking = true
    }
}

// Se agrega el event listener cuando el componente se monta
onMounted(() => {
    window.addEventListener('scroll', onScroll)
})

// Se remueve el event listener cuando el componente se desmonta
onUnmounted(() => {
    window.removeEventListener('scroll', onScroll)
})
</script>
<template>
  <div :style="{width: currentWidth + '%'}">
    Contenido
  </div>
</template>