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

Question

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

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

Answer 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;       
}

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

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

Change the scroll bar width, color and height of specific container with overflow property

html

javascript

css

webkit

scrollbar

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

Change the scroll bar width, color and height of specific container with overflow property

html

javascript

css

webkit

scrollbar

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