Quiero cambiar el ancho, el color y la altura de la barra de desplazamiento solo de mi barra lateral en el tablero. He visto en muchas páginas que la barra de desplazamiento del navegador y el contenedor específico (con propiedad de desbordamiento) difieren. cuando trato de cambiar la propiedad de la barra de desplazamiento, la barra de desplazamiento de los navegadores también cambia. Entonces, alguien, por favor, ayúdeme a cambiar la propiedad de la barra de desplazamiento del contenedor específico. Gracias.
.container{ height:100px; overflow:auto; display: block; } .container::-webkit-scrollbar{ width:5px; background-color:#000; } .container::-webkit-scrollbar-thumb{ background:red; border-radius:5px; } <div style="height:800px"> <div class="container"> <p>A paragraph is a series of related sentences developing a central idea, called the topic. Try to think about paragraphs in terms of thematic unity: a paragraph is a sentence or a group of sentences that supports one central, unified idea. Paragraphs add one idea at a time to your broader argument.A paragraph is a series of related sentences developing a central idea, called the topic. Try to think about paragraphs in terms of thematic unity: a paragraph is a sentence or a group of sentences that supports one central, unified idea. Paragraphs add one idea at a time to your broader argument.A paragraph is a series of related sentences developing a central idea, called the topic. Try to think about paragraphs in terms of thematic unity: a paragraph is a sentence or a group of sentences that supports one central, unified idea. Paragraphs add one idea at a time to your broader argument.A paragraph is a series of related sentences developing a central idea, called the topic. Try to think about paragraphs in terms of thematic unity: a paragraph is a sentence or a group of sentences that supports one central, unified idea. Paragraphs add one idea at a time to your broader argument.</p> </div> </div>Puede cambiar la barra de desplazamiento de cualquier contenedor como este:
.container{ overflow: scroll; height: 100px; background-color: yellow; display: block; } .container::-webkit-scrollbar { width: 5px; height: 8px; background-color: black; } .container::-webkit-scrollbar-thumb { background: red; } .inner-container{ height: 800px; } <div class="container"> <div class="inner-container">inner container</div> </div>Es bastante simple. Puedes hacer esto usando -webkit-scrollbar .
HTML
<div class="custom-scroll"> </div>CSS
.custom-scroll { overflow: auto; } .custom-scroll::-webkit-scrollbar { width: 10px; } .custom-scroll::-webkit-scrollbar-track { background: red; } .custom-scroll::-webkit-scrollbar-thumb { background: grey; }