Hacer que la barra de desplazamiento no ocupe espacio / evitar el cambio de diseño

Estoy haciendo una aplicación con html y necesito tener una barra de desplazamiento. Pero cada vez que agrego uno, cambia todo para hacer el espacio necesario para la barra de desplazamiento. Esto arruina el diseño de la aplicación.

Así que necesito una forma de hacer que la barra de desplazamiento simplemente se superponga en la parte superior de la página, lo que significa que la página todavía está detrás de ella. Ya sé cómo diseñar la barra de desplazamiento para que la parte posterior sea transparente, solo necesito que la barra de desplazamiento no ocupe espacio.

¡Gracias de antemano!

Actualizar – overlay era solo webkit y ahora está obsoleto.

Puedes usar el overflow overlay propiedad en lugar de scroll:

html {
    overflow-y: overlay;
}

Actualización 2021 – Uso scrollbar-gutter

los scrollbar-gutter La propiedad CSS permite a los autores reservar espacio para la barra de desplazamiento, evitando cambios de diseño no deseados a medida que crece el contenido y evitando imágenes innecesarias cuando no es necesario desplazarse.

body {
  overflow-y: auto;
  scrollbar-gutter: stable;
}

Ejemplo

Demostración en Stack Snippets y jsviolín

body {
  padding: 16px;
}
.grid {
    display: grid;
    grid-template-columns: repeat(2, 273px);
    grid-gap: 16px;
}
.card-header {
  margin-bottom: 4px;
  white-space: pre-line;
  font-weight: bold;
}
.card-body {
  overflow: auto;
  border: 1px solid black;
  height: 120px;
  
}
.scrollbar-stable {
  scrollbar-gutter: stable;
}

<h1><code>scrollbar-gutter</code> sample</h1>

<div class="grid">

  <div class="card">
    <pre class="card-header">
overflow: auto;
scrollbar-gutter: auto;
    </pre>
    <div class="card-body">Doggo ipsum length boy noodle horse doing me a frighten doggorino, woofer he made many woofs. Thicc puggorino smol</div>
  </div>
  
  <div class="card">
    <pre class="card-header">
overflow: auto;
scrollbar-gutter: stable;
    </pre>
    <div class="card-body scrollbar-stable">Doggo ipsum length boy noodle horse doing me a frighten doggorino, woofer he made many woofs. Thicc puggorino smol</div>
  </div>
  
  <div class="card">
    <pre class="card-header">
overflow: auto;
scrollbar-gutter: auto;
    </pre>
    <div class="card-body">Doggo ipsum length boy noodle horse doing me a frighten doggorino, woofer he made many woofs. Thicc puggorino smol borking doggo with a long snoot for pats shibe long woofer very hand that feed shibe pats, vvv wow such tempt long woofer heckin fluffer. Long water shoob smol corgo sub woofer</div>
  </div>
  
  <div class="card">
    <pre class="card-header">
overflow: auto;
scrollbar-gutter: stable;
    </pre>
    <div class="card-body scrollbar-stable">Doggo ipsum length boy noodle horse doing me a frighten doggorino, woofer he made many woofs. Thicc puggorino smol borking doggo with a long snoot for pats shibe long woofer very hand that feed shibe pats, vvv wow such tempt long woofer heckin fluffer. Long water shoob smol corgo sub woofer</div>
  </div>
  
</div>

Otras lecturas

• Documentos
  • canal de la barra de desplazamiento | MDN
  • canal de la barra de desplazamiento | Puedo usar
• Artículos
  • Evite los cambios de diseño no deseados causados ​​​​por las barras de desplazamiento con el canal de la barra de desplazamiento
  • Explicación de la propiedad CSS “scrollbar-gutter”.
  • canal de la barra de desplazamiento | Trucos CSS
• Especificaciones
  • CSS WG Blog – Minutos Telecon 2021-08-04
  • Módulo de desbordamiento de CSS Nivel 3
• Relacionado
  • HTML reserva espacio para la barra de desplazamiento
  • Evite que la barra de desplazamiento se sume al ancho de la página en Chrome
  • Chrome reserva espacio para la barra de desplazamiento incluso si está oculta
  • CSS 100% de ancho pero evita la barra de desplazamiento
• Alternativamentepara que la barra de desplazamiento nunca ocupe espacio, consulte:
  • Ocultar la barra de desplazamiento, pero sin dejar de poder desplazarse

No hay manera de hacer que aparezca una barra de desplazamiento en la parte superior de su contenido sin usar trucos sombríos, y de todos modos no es la mejor idea, ya que afectará la usabilidad de su aplicación. Si la barra de desplazamiento está sobre el contenido, es probable que oculte enlaces/texto/etc.

Idealmente, su página debe tener un estilo que se adapte a diferentes anchos de navegador/página sin romperse. Especialmente con solo una pequeña barra de desplazamiento.

De todos modos, aquí hay una solución que puede ayudar:

html {
    overflow-y: scroll;
}

Agregar este estilo asegurará que la pista de la barra de desplazamiento esté siempre presente y también ayudará a evitar páginas “con saltos” cuando aparezca/desaparezca una barra de desplazamiento. Una vez más, la solución real es utilizar un diseño flexible.

Como nota al margen, generalmente no se recomienda diseñar la barra de desplazamiento. No funciona entre navegadores y, por lo general, se ignorará por completo.

Puede resolver esto ocultando la barra de desplazamiento. La solución está en el sitio web de ws3Schools, https://www.w3schools.com/howto/howto_css_hide_scrollbars.asp

<!DOCTYPE html>
<html>
<head>
<style>
.example {
  background-color: #eee;
  width: 200px;
  height: 100px;
  border: 1px dotted black;
  overflow-y: scroll; /* Add the ability to scroll */
}

/* Hide scrollbar for Chrome, Safari and Opera */
.example::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.example {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
</style>
</head>
<body>

<h2>Hide scrollbar but keep functionality</h2>
<p>Try to scroll inside the div below:</p>

<div class="example">Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. </div>

</body>
</html>

Si no tiene miedo de tener algo oculto, el código a continuación parece funcionar.

body {
  width: 100vw;
  overflow-x: hidden;
}

@supports (overflow-x: clip) {
  body {
    overflow-x: clip;
  }
}

La diferencia entre clip y hidden es que el clip palabra clave también prohíbe todos desplazamiento, incluido el desplazamiento programático. Para navegadores no compatibles clipReiniciar scrollLeft a 0 en la devolución de llamada del evento de desplazamiento de document.body si es necesario.

Ver también, compatibilidad del navegador de overflow.

Si desea ocultar la barra de desplazamiento todo el tiempo, puede usar este código. * decir todo

/* Hide scrollbar for Chrome, Safari and Opera */
*::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
*{
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}