使用溢出属性更改特定容器的滚动条宽度、颜色和高度

Posted 2023-02-19

【中文标题】使用溢出属性更改特定容器的滚动条宽度、颜色和高度

【英文标题】：Change the scroll bar width, color and height of specific container with overflow property

【发布时间】：2022-01-11 10:36:34

【问题描述】：

我只想更改仪表板中侧边栏的滚动条的宽度颜色和高度。我在许多页面中看到浏览器滚动条和特定容器（具有溢出属性）不同。当我尝试更改它的滚动条属性时，浏览器滚动条也会发生变化。所以任何人请帮我改变特定容器滚动条的属性。谢谢。

【参考方案1】：

您可以像这样更改任何容器的滚动条：

.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>

【参考方案2】：

这很简单。您可以使用-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;       

【参考方案3】：

.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>