Html 更改垂直滚动条样式

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

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

.msg容器基础{
边框：1px实心#ddd；
背景：白色；
溢出x：隐藏；
}

不建议使用滚动条样式，因为它的可移植性很差（IE和Firefox不支持），但如果您仍然想这样做，请介绍如何使用滚动条的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; 
}

---

您可以这样做，但目前它只能在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;
} 

---

谢谢你的回答：）