Non-standard: This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.
O pseudo-elemento CSS :-webkit-scrollbar afeta o estilo de um elemento referente a barra de rolagem quando se tem por definido overflow:scroll;.
Nota:
Se o overflow:scroll; não estiver definido nenhuma barra de rolagem será exibida.
Nota:::-webkit-scrollbar está disponível somente em navegadores baseados em Blink - e WebKit - (Chrome, Edge, Opera, Safari, todos os navegadores para iOS, e outros). Um método padronizado para estilização de barras de rolagem está disponível com scrollbar-color e scrollbar-width.
Você pode usar os seguintes pseudo-elementos para customizar diversas partes da barra de rolagem para navegadores baseados em webkit:
::-webkit-scrollbar — a barra de rolagem inteira.
::-webkit-scrollbar-button — os botões na barra (setas para cima e para baixo no qual rolam uma linha de cada vez).
::-webkit-scrollbar-thumb — a barra arrastável de rolagem.
::-webkit-scrollbar-track — o caminho (barra de progresso) da barra de rolagem onde há uma barra cinza encima de uma barra branca.
::-webkit-scrollbar-track-piece — a parte do caminho (barra de progresso) não coberto por uma barra.
::-webkit-scrollbar-corner — o canto inferior da barra de rolagem, onde ambas barras horizontal e vertical se encontram. Muitas das vezes o canto inferior direito da janela do navegador.
::-webkit-resizer — a barra redimensionável que aparece no canto inferior de alguns elementos.
.visible-scrollbar, .invisible-scrollbar, .mostly-customized-scrollbar {
display: block;
width: 10em;
overflow: auto;
height: 2em;
}
.invisible-scrollbar::-webkit-scrollbar {
display: none;
}
/* Demonstração de uma barra de rolagem personalizada
* (não será visível ao menos que a largura/altura seja especificada) */
.mostly-customized-scrollbar::-webkit-scrollbar {
width: 5px;
height: 8px;
background-color: #aaa; /* ou que isso seja adicionado ao "caminho" da barra */
}
/* Adiciona a barra arrastável */
.mostly-customized-scrollbar::-webkit-scrollbar-thumb {
background: #000;
}
<div class="visible-scrollbar">
Etiam sagittis sem sed lacus laoreet, eu fermentum eros auctor.
Proin at nulla elementum, consectetur ex eget, commodo ante.
Sed eros mi, bibendum ut dignissim et, maximus eget nibh. Phasellus
blandit quam turpis, at mollis velit pretium ut. Nunc consequat
efficitur ultrices. Nullam hendrerit posuere est. Nulla libero
sapien, egestas ac felis porta, cursus ultricies quam. Vestibulum
tincidunt accumsan sapien, a fringilla dui semper in. Vivamus
consectetur ipsum a ornare blandit. Aenean tempus at lorem sit
amet faucibus. Curabitur nibh justo, faucibus sed velit cursus,
mattis cursus dolor. Pellentesque id pretium est. Quisque
convallis nisi a diam malesuada mollis. Aliquam at enim ligula.
</div>
<div class="invisible-scrollbar">
Estaéumapalavramuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuitolonga
</div>
<div class="mostly-customized-scrollbar">
Estaéumapalavramuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuitolonga<br>
E bem alta<br>
com uma barra de rolagem estranha.<br>
Quem diria que barras de rolagem poderiam ser estraaaanhas?
</div>
Tip: you can click/tap on a cell for more information.
Full support
Full support
No support
No support
Non-standard. Check cross-browser support before using.
See implementation notes.
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Tip: you can click/tap on a cell for more information.
Full support
Full support
No support
No support
Non-standard. Check cross-browser support before using.
See implementation notes.
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Tip: you can click/tap on a cell for more information.
Full support
Full support
No support
No support
Non-standard. Check cross-browser support before using.
See implementation notes.
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Tip: you can click/tap on a cell for more information.
Full support
Full support
No support
No support
Non-standard. Check cross-browser support before using.
See implementation notes.
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Tip: you can click/tap on a cell for more information.
Full support
Full support
No support
No support
Non-standard. Check cross-browser support before using.
See implementation notes.
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Tip: you can click/tap on a cell for more information.
Full support
Full support
No support
No support
Non-standard. Check cross-browser support before using.
See implementation notes.
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Tip: you can click/tap on a cell for more information.
Full support
Full support
No support
No support
Non-standard. Check cross-browser support before using.
See implementation notes.
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Tip: you can click/tap on a cell for more information.
Full support
Full support
No support
No support
Non-standard. Check cross-browser support before using.
See implementation notes.
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Tip: you can click/tap on a cell for more information.
Full support
Full support
No support
No support
Non-standard. Check cross-browser support before using.
See implementation notes.
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Tip: you can click/tap on a cell for more information.
Full support
Full support
No support
No support
Non-standard. Check cross-browser support before using.
See implementation notes.
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Tip: you can click/tap on a cell for more information.
Full support
Full support
No support
No support
Non-standard. Check cross-browser support before using.
See implementation notes.
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Tip: you can click/tap on a cell for more information.
Full support
Full support
No support
No support
Non-standard. Check cross-browser support before using.
See implementation notes.
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Tip: you can click/tap on a cell for more information.
Full support
Full support
No support
No support
Non-standard. Check cross-browser support before using.
See implementation notes.
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Tip: you can click/tap on a cell for more information.
Full support
Full support
No support
No support
Non-standard. Check cross-browser support before using.
See implementation notes.
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Tip: you can click/tap on a cell for more information.
Full support
Full support
No support
No support
Non-standard. Check cross-browser support before using.
See implementation notes.
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Tip: you can click/tap on a cell for more information.
Full support
Full support
No support
No support
Non-standard. Check cross-browser support before using.
See implementation notes.
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Tip: you can click/tap on a cell for more information.
Full support
Full support
No support
No support
Non-standard. Check cross-browser support before using.
See implementation notes.
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Tip: you can click/tap on a cell for more information.
Full support
Full support
No support
No support
Non-standard. Check cross-browser support before using.
See implementation notes.
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Tip: you can click/tap on a cell for more information.
Full support
Full support
No support
No support
Non-standard. Check cross-browser support before using.
See implementation notes.
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Tip: you can click/tap on a cell for more information.
Full support
Full support
No support
No support
Non-standard. Check cross-browser support before using.
See implementation notes.
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Tip: you can click/tap on a cell for more information.
Full support
Full support
No support
No support
Non-standard. Check cross-browser support before using.
See implementation notes.
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Tip: you can click/tap on a cell for more information.
Full support
Full support
No support
No support
Non-standard. Check cross-browser support before using.
See implementation notes.
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Tip: you can click/tap on a cell for more information.
Full support
Full support
No support
No support
Non-standard. Check cross-browser support before using.
See implementation notes.
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Tip: you can click/tap on a cell for more information.
Full support
Full support
No support
No support
Non-standard. Check cross-browser support before using.
See implementation notes.
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Tip: you can click/tap on a cell for more information.
Full support
Full support
No support
No support
Non-standard. Check cross-browser support before using.
See implementation notes.
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Tip: you can click/tap on a cell for more information.
Full support
Full support
No support
No support
Non-standard. Check cross-browser support before using.
See implementation notes.
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Tip: you can click/tap on a cell for more information.
Full support
Full support
No support
No support
Non-standard. Check cross-browser support before using.
See implementation notes.
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Tip: you can click/tap on a cell for more information.
Full support
Full support
No support
No support
Non-standard. Check cross-browser support before using.
See implementation notes.
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Tip: you can click/tap on a cell for more information.
Full support
Full support
No support
No support
Non-standard. Check cross-browser support before using.
See implementation notes.
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Tip: you can click/tap on a cell for more information.
Full support
Full support
No support
No support
Non-standard. Check cross-browser support before using.
See implementation notes.
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Tip: you can click/tap on a cell for more information.
Full support
Full support
No support
No support
Non-standard. Check cross-browser support before using.
See implementation notes.
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Tip: you can click/tap on a cell for more information.
Full support
Full support
No support
No support
Non-standard. Check cross-browser support before using.
See implementation notes.
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Tip: you can click/tap on a cell for more information.
Full support
Full support
No support
No support
Non-standard. Check cross-browser support before using.
See implementation notes.
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Tip: you can click/tap on a cell for more information.
Full support
Full support
No support
No support
Non-standard. Check cross-browser support before using.
See implementation notes.
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Tip: you can click/tap on a cell for more information.
Full support
Full support
No support
No support
Non-standard. Check cross-browser support before using.
See implementation notes.
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Tip: you can click/tap on a cell for more information.
Full support
Full support
No support
No support
Non-standard. Check cross-browser support before using.
See implementation notes.
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Tip: you can click/tap on a cell for more information.
Full support
Full support
No support
No support
Non-standard. Check cross-browser support before using.
See implementation notes.
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Tip: you can click/tap on a cell for more information.
Full support
Full support
No support
No support
Non-standard. Check cross-browser support before using.
See implementation notes.
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Tip: you can click/tap on a cell for more information.
Full support
Full support
No support
No support
Non-standard. Check cross-browser support before using.
See implementation notes.
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Tip: you can click/tap on a cell for more information.
Full support
Full support
No support
No support
Non-standard. Check cross-browser support before using.
See implementation notes.
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Tip: you can click/tap on a cell for more information.
Full support
Full support
No support
No support
Non-standard. Check cross-browser support before using.
See implementation notes.
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Tip: you can click/tap on a cell for more information.
Full support
Full support
No support
No support
Non-standard. Check cross-browser support before using.
See implementation notes.
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Tip: you can click/tap on a cell for more information.
Full support
Full support
No support
No support
Non-standard. Check cross-browser support before using.
See implementation notes.
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Tip: you can click/tap on a cell for more information.
Full support
Full support
No support
No support
Non-standard. Check cross-browser support before using.
See implementation notes.
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Tip: you can click/tap on a cell for more information.
Full support
Full support
No support
No support
Non-standard. Check cross-browser support before using.
See implementation notes.
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Tip: you can click/tap on a cell for more information.
Full support
Full support
No support
No support
Non-standard. Check cross-browser support before using.
See implementation notes.
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Tip: you can click/tap on a cell for more information.
Full support
Full support
No support
No support
Non-standard. Check cross-browser support before using.
See implementation notes.
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Tip: you can click/tap on a cell for more information.
Full support
Full support
No support
No support
Non-standard. Check cross-browser support before using.
See implementation notes.
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Tip: you can click/tap on a cell for more information.
Full support
Full support
No support
No support
Non-standard. Check cross-browser support before using.
See implementation notes.
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.