¿Por qué translateX usando vw deja un espacio desigual cuando hay una barra de desplazamiento?

Cuando traduzco los elementos ul alejándolos entre sí al desplazarme, el espacio sobrante entre el inicio de la ventana gráfica y la primera ul es más pequeño que el espacio entre el final de la ventana gráfica y la última ul . Esto solo sucede cuando hay una barra de desplazamiento en la página. Aquí están los fragmentos:

 <nav class='navbar flex-container'> <ul class='nav-item__container flex-container'> ... </ul> <ul class='nav-item__container flex-container'> ... </ul> </nav>

 nav { display: flex; justify-content: center; align-items: center; } .nav-container.scrolled nav .nav-item__container:nth-child(1) { transform: translateX(calc(-50vw + 100%)); } .nav-container.scrolled nav .nav-item__container:nth-child(2) { transform: translateX(calc(50vw - 100%)); }

Arreglé esto obteniendo el ancho del scrollbr y agregándolo al translateX original del primer elemento ul .

 let scrollbarWidth = window.innerWidth - body.offsetWidth; window.addEventListener('scroll', function() { // nav menu item animatate on scroll if (window.scrollY >= 10) { navContainer.classList.add('scrolled'); navItemContainer.style.transform = `translateX(calc(-45vw + 100% + ${scrollbarWidth}px))`; } else { navContainer.classList.remove('scrolled'); navItemContainer.removeAttribute('style'); } });