更改垂直滚动条样式

Question

是否可以更改垂直滚动条的样式？我想上下移动两个箭头。

<div class="msg-container-base">
  <message
    *ngFor="let message of thread.messages | async"
    [message]="message">
  </message>
</div>


.msg-container-base {
  border: 1px solid #ddd;
  background: white;
  overflow-x: hidden;
}

Answer 1

不推荐使用滚动条样式，因为它具有非常糟糕的可移植性（IE和Firefox不支持它），但是如果你仍然想要这样，here is a jsfiddle关于如何使用滚动条的webkit样式

   /* width */
::-webkit-scrollbar {
    width: 20px;
}

/* Track */
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey; 
    border-radius: 2px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: grey; 
    border-radius: 2px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: darkgrey; 
}

Answer 2

你可以这样做，但它现在只适用于webkit浏览器。或者，您可以使用JQuery插件完成工作。

这是使用CSS为滚动条设置样式的方法：

::-webkit-scrollbar-track {
      background-color: #b46868;
} 

::-webkit-scrollbar-thumb {
      background-color: rgba(0, 0, 0, 0.2); 
} 

::-webkit-scrollbar-button {
      background-color: #7c2929;
} 

::-webkit-scrollbar-corner {
      background-color: black;
}