HTML reserva espacio para la barra de desplazamiento

Tengo un div que puede desbordarse a medida que se agrega o elimina contenido.

Sin embargo, el diseñador de UI no quiere una barra de desplazamiento visible, pero inactiva (como con overflow: scroll), y no quieren que el diseño del contenido cambie cuando se agrega y elimina uno (como con overflow: auto).

¿Hay algún medio para obtener este comportamiento y considerando las diferentes barras de desplazamiento en diferentes plataformas y navegadores?

https://jsfiddle.net/qy9a2r00/1/

Ningún navegador admite esta propiedad todavía (2021), pero canal de la barra de desplazamiento es una solución sugerida para esto.

Actualización: 2022: todos los navegadores modernos, excepto Safari, admiten la propiedad.

La única forma de hacer esto es hacer que el ancho de los artículos en el contenedor sea fijo. Y tendrás que ser conservador con el ancho de la barra de desplazamiento.

   .container { 
       width: 200px;
       height: 200px;
       overflow: auto;
       overflow-x: hidden;
       border: 1px solid black;
   }
   .item {
       width: 200px;
...

https://jsfiddle.net/fr1jnmn6/1/

overflow-y:overlay sería una solución parcial a esto, ya que resuelve el problema de no querer que el diseño del contenido cambie cuando se agrega o elimina una barra de desplazamiento. Se puede agregar relleno o margen adicional para que la barra de desplazamiento no ofusque el div detrás

Aquí está el jsfiddle para el mismo https://jsfiddle.net/kitwradr/2qcsj6hw/

Puedes configurar overflow: scroll para reservar espacio para la barra de desplazamiento y agregar una clase que oculte la barra de desplazamiento

body {
 overflow-y: scroll;
}

Oculte la barra de desplazamiento agregando clase a div (o al cuerpo) que hará que su barra de desplazamiento sea transparente

.scroll-hidden::-webkit-scrollbar
{
    background-color: transparent;
}

.scroll-hidden::-webkit-scrollbar-track
{
    background-color: transparent;
}

Para verificar si tiene un desbordamiento de contenido, puede usar estas líneas:

  const { body } = document
  const overflow = body.scrollHeight > body.clientHeight

Si no hay problemas de desbordamiento, ocultaremos la barra de desplazamiento y reservaremos espacio.

body.classList.add('scroll-hidden')  

Si el contenido se desborda, mostraremos la barra de desplazamiento

body.classList.remove('scroll-hidden')  

Pruebe la solución aquí https://jsfiddle.net/ycharniauski/y0pwftmq/

Es una solución un poco hacky. Espero que en el futuro css tenga alguna propiedad para reservar espacio

Uno no puede saber qué tan gruesa es la barra de desplazamiento, usando solo HTML y CSS y, por lo tanto, no sabe el width del marcador de posición (azul).

Puede resolver una tarea de este tipo utilizando secuencias de comandos. Fuerce una barra de desplazamiento en un contenedor oculto y mida el ancho interior y exterior. La diferencia es el ancho de la barra de desplazamiento. Establezca este ancho (por ejemplo, como CSS) en el elemento de marcador de posición. Y en la parte complicada, oculta este elemento cada vez que se muestre una barra de desplazamiento.

La solución habitual a este problema es la que no desea.

Necesitas tener un padre división con un ancho fijo (el ancho total final) y un niño división con un ancho 16px más pequeño. Entonces la barra de desplazamiento tendrá 16px libres en el padre división.

El ancho siempre debe ser un número (no puede ser un valor relativo). en el niño división, también debe usar un número. No puedes hacer calc (100% -16px).

<div className="user-list">
  <div className="user-list__content">
    {content}
  </div>    
</div>

.user-list {
  width: 500px;  /* total width */
  height: 1000x;
  overflow-y: auto;
}

.user-list__content {
  width: 484px;  /* must be 16px smaller */
  height: 100%;
}

Esta es una pregunta antigua, pero en caso de que alguien venga a buscar.

Detecte la barra de desplazamiento y muestre/oculte su sección azul en función de que la barra de desplazamiento sea visible. Si la barra de desplazamiento está visible, OCULTA tus secciones azules (aplica un estilo). Si no está visible, muestre su sección de relleno azul.

Cuando la barra de desplazamiento se hace visible, el relleno se oculta, por lo que las secciones roja y verde no cambiarán de tamaño ni de posición.

Este artículo a continuación analiza la detección de la barra de desplazamiento. Deberá configurar un div en algún lugar para detectar el ancho actual de la barra de desplazamiento con anticipación para configurar sus cuadros azules con el mismo ancho.

¿Cómo puedo verificar si una barra de desplazamiento está visible?