Aquí he hecho que la pista de la barra de desplazamiento ocupe menos espacio del que normalmente ocuparía. Sin embargo, quiero que haya una pequeña región por encima y por debajo de la pista que no sea ocupada por la pista en sí misma para que la pista pueda ser un contenedor en forma de cápsula.

Perdón por el pobre contraste de color, pero observe aquí que esta región es de un color diferente al pie de página al lado. Está tomando el color de mi cuerpo. Quiero que esto sea transparente para que se vea el color detrás. es posible?

El CSS relevante:

 ::-webkit-scrollbar { width: 1.375rem; background-color: transparent; // doesn't work. it just inherits color of body } ::-webkit-scrollbar-track { background: black; border-radius: 10px; margin: 2rem 0; } ::-webkit-scrollbar-thumb { background: red; border-radius: 10px; }

Editar: esta barra de desplazamiento es para toda la página