Barra de rolagem - CSS-Tricks

Uma breve história de barras de rolagem de estilo:

Costumava ser algo que apenas o Internet Explorer poderia fazer (versões antigas) com coisas semelhantes -ms-scrollbar-base-color. Estes não existem mais.
Em seguida, os motores de navegador baseados em WebKit foram incorporados a coisas como ::-webkit-scrollbar. Isso é o que esta entrada do Alamanac cobre principalmente, já que funciona em todo o cenário Safari / Chrome hoje.
Os padrões finalmente se envolveram, e essas opções de estilo são cobertas por propriedades não prefixadas como scrollbar-color e scrollbar-width.

Barras de rolagem de estilo para o mundo Safari / Chrome são expostas atrás do -webkitprefixo do fornecedor.

Esta entrada do almanaque é uma visão geral, para uma análise mais completa do trabalho com barras de rolagem personalizadas, leia este artigo CSS-Tricks.

body::-webkit-scrollbar ( width: 1em; ) body::-webkit-scrollbar-track ( box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); ) body::-webkit-scrollbar-thumb ( background-color: darkgrey; outline: 1px solid slategrey; )

A -webkit-scrollbarfamília de propriedades consiste em sete pseudoelementos diferentes que, juntos, constituem um elemento de interface do usuário de barra de rolagem completa:

::-webkit-scrollbaraborda o plano de fundo da própria barra. Geralmente é coberto por outros elementos
::-webkit-scrollbar-button endereça os botões direcionais na barra de rolagem
::-webkit-scrollbar-track aborda o espaço vazio “abaixo” da barra de progresso
::-webkit-scrollbar-track-piece é a camada superior da barra de progresso não coberta pelo elemento de rolagem arrastável (miniatura)
::-webkit-scrollbar-thumb aborda o elemento de rolagem arrastável que redimensiona dependendo do tamanho do elemento de rolagem
::-webkit-scrollbar-corner aborda o (geralmente) canto inferior do elemento rolável, onde duas barras de rolagem podem se encontrar
::-webkit-resizeraborda a alça de redimensionamento arrastável que aparece acima do scrollbar-cornercanto inferior de alguns elementos

Além desses pseudo-elementos, há também onze classes de pseudo-seletor que não são necessárias, mas fornecem aos designers o poder de estilizar vários estados e interações da interface do usuário da barra de rolagem. Uma análise completa desses pseudo-seletores e um exemplo detalhado podem ser encontrados neste artigo CSS-Tricks.

Confira esta Caneta!

Pontos de interesse

Se não houver um seletor de qualificação precedendo os vários pseudoelementos, os estilos se aplicarão a qualquer barra de rolagem que possa aparecer na página.
Definir -webkit-scrollbarestilos é uma boa maneira de forçar sua página da web a mostrar barras de rolagem horizontais ou verticais nas versões do Mac OS mais recentes que o Lion, nas quais as barras de rolagem geralmente ficam ocultas por padrão.
Uma vez que esta propriedade está atrás de um -webkitprefixo de fornecedor, vários plug-ins jQuery foram escritos para “polyfill” ou estendem esta funcionalidade para outros navegadores. Um desses plugins é o jScrollPane.

Suporte para navegador

Os dados de suporte deste navegador são do Caniuse, que tem mais detalhes. Um número indica que o navegador oferece suporte ao recurso nessa versão e superior.