更改垂直滚动条样式

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

更改垂直滚动条样式

Change vertical scrollbar style

html

css

overflow