A scrollbar-gutterpropriedade fornece flexibilidade para determinar como o espaço que o navegador usa para exibir uma barra de rolagem que interage com o conteúdo na tela. A especificação descreve como “reservar espaço para a barra de rolagem” e isso faz sentido, já que é isso que uma calha é: um contêiner que reserva espaço para o que quer que esteja nele e o separa de outros elementos.
Então, estamos todos na mesma página, uma barra de rolagem é aquela coisa normalmente no lado direito do navegador (formalmente referido como "agente do usuário" - ou UA - nas especificações) que indica a posição de rolagem em relação ao total espaço disponível na página da web.
Esses têm sido tradicionalmente um recipiente visual com um indicador deslizante. Elas são conhecidas como barras de rolagem clássicas . O indicador fica dentro da calha e a calha ocupa espaço físico na tela quando é exibida.
Ultimamente, porém, as aparências da barra de rolagem tendem a algo muito mais mínimo. Chamamos essas barras de rolagem de sobreposição e elas são parcial ou totalmente transparentes quando posicionadas no topo do conteúdo da página. Em outras palavras, ao contrário das barras de rolagem clássicas que ocupam espaço físico na tela, as barras de rolagem sobrepostas ficam no topo do conteúdo da tela.
Enquanto isso, uma barra de rolagem pode aparecer em outros lugares. Além de ficar alinhado à direita do navegador, veremos barras de rolagem nos elementos HTML onde o conteúdo ultrapassa o elemento e a overflowpropriedade (ou overflow-xe overflow-y) é definida com o scrollvalor. E observe que a existência de overflow-xmeios que temos rolagem horizontal, além de rolagem vertical.
É disso que estamos falando. Não o próprio indicador, mas o contêiner que o contém. Essa é a sarjeta. Se um navegador usa uma barra de rolagem clássica ou sobreposta, depende totalmente do próprio UA. Não cabe a nós decidir. Isso é verdade para a largura da barra de rolagem. O agente do usuário define isso e não nos dá nenhum controle sobre isso.
É aí que scrollbar-gutterentra. Podemos explicar se a calha está presente em suas variações clássicas e de sobreposição.
Sintaxe
.my-element ( scrollbar-gutter: ( auto | ( stable | always ) && both? && force? ) )Um e comercial duplo (&&) separa dois ou mais componentes, os quais devem ocorrer em qualquer ordem.
Um ponto de interrogação (?) Indica que o tipo, palavra ou grupo anterior é opcional (ocorre zero ou uma vez).
Valores
auto(valor inicial): Praticamente o comportamento padrão descrito até agora. Definir a propriedade com este valor permite que as barras de rolagem clássicas consumam bens imóveis na IU em elementos onde aoverflowpropriedade desses elementos é definida comoscrollouauto. Por outro lado, as barras de rolagem de sobreposição não ocupam nenhum espaço por ficarem no topo do elemento.stable: Isso adiciona um pouco de comportamento opinativo, sempre reservando espaço para a medianiz da barra de rolagem, desde que aoverflowpropriedade no mesmo elemento seja definida comoscrollouautoe estejamos lidando com uma barra de rolagem clássica - mesmo quando a caixa não está transbordando. Por outro lado, isso não terá impacto em uma barra de rolagem de sobreposição.always: Isso age da mesma forma,stablemas garante que o espaço para a calha da barra de rolagem seja sempre reservado, independentemente de a barra de rolagem ser clássica ou sobreposta e independentemente de o conteúdo estar transbordando ou não.both: Isso afirma que uma medianiz da barra de rolagem será colocada em ambos os lados do elemento quando a medianiz padrão for exibida. Você pode ver como isso pode ser útil se o seu design exigir espaçamento igual em ambos os lados do elemento.force: Este é o mesmo que aplicar tantostableealwaysonde o elemento deoverflowestiver definida paraauto,scroll,visible,hiddenouclip.
O Rascunho de Trabalho da especificação tem uma tabela super útil que divide essas definições em seus contextos para mostrar a relação que eles têm com as barras de rolagem clássicas e sobrepostas.
| Barras de rolagem clássicas | Overlay scrollbars | ||||
|---|---|---|---|---|---|
| transbordar | scrollbar-gutter | Transbordante | Não transbordando | Transbordante | Não transbordando |
| rolagem | auto | G | G | ||
| estábulo | GM | G | |||
| sempre | G | G | G | G | |
| auto | G | ||||
| estábulo | G | G | |||
| sempre | G | G | G | G | |
| visível, oculto, clipe | auto | ||||
| estábulo | f? | f? | |||
| sempre | f? | f? | f? | f? | |
“G” representa casos em que o espaço é reservado para a calha da barra de rolagem, “f?” casos em que o espaço é reservado para a medianiz da barra de rolagem se force foi especificado, e casos de células vazias em que nenhum espaço é reservado.
Status de especificação
A scrollbar-gutterpropriedade é definida no Módulo Overflow Nível 4, que está no status Working Draft. Isso significa que ainda é um trabalho em andamento e pode mudar até o momento em que o rascunho for encaminhado para a recomendação candidata.
a especificação do Overflow Module Nível 3 também é um Working Draft, portanto, é uma boa indicação de que (1) levará algum tempo para scrollbar-gutterse tornar uma recomendação e (2) ainda está muito em andamento.
Suporte para navegador
Não havia suporte para navegador no momento da última atualização.
Mais Informações
- Rascunho de trabalho de nível 4 do módulo de estouro de CSS
- GitHub Issue # 92
- O Grupo de Trabalho CSS da TPAC: O que há de novo no CSS? Inclui uma proposta desenhada à mão para a tabela que descreve o comportamento dos valores dos imóveis.