La scrollbar-gutterpropiedad proporciona flexibilidad para determinar cómo el navegador usa el espacio para mostrar una barra de desplazamiento que interactúa con el contenido en la pantalla. La especificación lo describe "reservando espacio para la barra de desplazamiento" y eso tiene sentido, ya que eso es lo que es una canaleta en última instancia: un contenedor que reserva espacio para lo que sea que haya en él y lo separa de otros elementos.
Todos estamos en la misma página, una barra de desplazamiento es lo que normalmente se encuentra en el lado derecho del navegador (formalmente denominado "agente de usuario", o UA, en la especificación) que indica la posición de desplazamiento en relación con el total. espacio disponible en la página web.
Estos han sido tradicionalmente un contenedor visual con un indicador deslizante. Estos se conocen como barras de desplazamiento clásicas . El indicador se encuentra dentro de la canaleta y la canaleta ocupa espacio físico en la pantalla cuando se muestra.
Últimamente, sin embargo, las apariencias de la barra de desplazamiento han tendido hacia algo mucho más mínimo. Las llamamos barras de desplazamiento superpuestas y son parcial o totalmente transparentes mientras se encuentran en la parte superior del contenido de la página. En otras palabras, a diferencia de las barras de desplazamiento clásicas que ocupan espacio físico en la pantalla, las barras de desplazamiento superpuestas se ubican en la parte superior del contenido de la pantalla.
Mientras estamos en eso, pueden aparecer barras de desplazamiento en otros lugares. Además de estar alineado a la derecha del navegador, veremos barras de desplazamiento en elementos HTML donde el contenido desborda el elemento y la overflowpropiedad (o overflow-xy overflow-y) se establece en el scrollvalor. Y tenga en cuenta que la existencia de overflow-xmedios tenemos el desplazamiento horizontal además del desplazamiento vertical.
De eso estamos hablando. No el indicador en sí, sino el contenedor que lo contiene. Esa es la cuneta. Si un navegador usa una barra de desplazamiento clásica o superpuesta depende totalmente de la propia UA. Eso no nos corresponde a nosotros decidirlo. Tal es el caso del ancho de la barra de desplazamiento. El agente de usuario define eso y no nos da ningún control sobre él.
Ahí es donde scrollbar-gutterentra en juego. Podemos explicar si el canalón está presente en sus variaciones clásicas y superpuestas.
Sintaxis
.my-element ( scrollbar-gutter: ( auto | ( stable | always ) && both? && force? ) )Un doble ampersand (&&) separa dos o más componentes, todos los cuales deben ocurrir, en cualquier orden.
Un signo de interrogación (?) Indica que el tipo, palabra o grupo anterior es opcional (aparece cero o una vez).
Valores
auto(valor inicial): Prácticamente el comportamiento predeterminado descrito hasta ahora. Establecer la propiedad en este valor permite que las barras de desplazamiento clásicas consuman espacio en la interfaz de usuario en los elementos donde laoverflowpropiedad de esos elementos está configurada enscrolloauto. Por el contrario, las barras de desplazamiento superpuestas no ocupan espacio en absoluto al sentarse sobre el elemento.stable: Esto agrega un poco de comportamiento obstinado al reservar siempre espacio para el margen de la barra de desplazamiento, siempre que laoverflowpropiedad en el mismo elemento esté configurada enscrolloautoy estemos tratando con una barra de desplazamiento clásica, incluso cuando el cuadro no se desborde. Por el contrario, esto no tendrá ningún impacto en una barra de desplazamiento superpuesta.always: Esto actúa de la misma manera que,stablepero garantiza que el espacio para el medianil de la barra de desplazamiento siempre esté reservado, independientemente de si la barra de desplazamiento es clásica o superpuesta e independientemente de si el contenido se desborda o no.both: Esto indica que se colocará un medianil de barra de desplazamiento a ambos lados del elemento cuando se muestre el medianil predeterminado. Puede ver cómo esto podría ser útil si su diseño requiere un espacio igual en ambos lados del elemento.force: Este es el mismo que aplicar tantostableyalwaysdonde el elemento deoverflowse establece enauto,scroll,visible,hiddenoclip.
El Borrador de trabajo de la especificación tiene una tabla muy útil que divide esas definiciones en sus contextos para mostrar la relación que tienen con las barras de desplazamiento clásicas y superpuestas.
| Barras de desplazamiento clásicas | Barras de desplazamiento superpuestas | ||||
|---|---|---|---|---|---|
| Desbordamiento | barra de desplazamiento-canalón | Desbordante | No rebosante | Desbordante | No rebosante |
| Desplazarse | auto | GRAMO | GRAMO | ||
| estable | GM | GRAMO | |||
| siempre | GRAMO | GRAMO | GRAMO | GRAMO | |
| auto | GRAMO | ||||
| estable | GRAMO | GRAMO | |||
| siempre | GRAMO | GRAMO | GRAMO | GRAMO | |
| visible, oculto, clip | auto | ||||
| estable | ¿F? | ¿F? | |||
| siempre | ¿F? | ¿F? | ¿F? | ¿F? | |
"G" representa los casos en los que se reserva espacio para el margen de la barra de desplazamiento, "f?" casos en los que se reserva espacio para el canal de la barra de desplazamiento si se especificó la fuerza, y casos de celdas vacías en los que no se reserva el espacio.
Estado de especificación
La scrollbar-gutterpropiedad se define en el nivel 4 del módulo de desbordamiento, que se encuentra en estado de borrador de trabajo. Eso significa que esto todavía es un trabajo en progreso y podría cambiar entre ahora y el momento en que el borrador pase a la Recomendación Candidata.
la especificación del módulo de desbordamiento de nivel 3 también es un borrador de trabajo, por lo que es una buena indicación de que (1) tomará algún tiempo para scrollbar-gutterconvertirse en una recomendación y (2) todavía está en progreso.
Soporte del navegador
No hay soporte de navegador en el momento de la última actualización.
Más información
- Borrador de trabajo de nivel 4 del módulo de desbordamiento CSS
- Número 92 de GitHub
- El grupo de trabajo de CSS en TPAC: ¿Qué hay de nuevo en CSS? Incluyendo una propuesta dibujada a mano para la tabla que describe el comportamiento de los valores de las propiedades.
