我想更改水平滚动条CSS

Question

我想更改水平滚动条CSS。在这里，我使用代码进行更改，但同时也更改了垂直滚动条，我只想更改水平滚动条。怎么做？我也在这里上传图片。

export class notification implements OnInit {

  constructor(public service:Service) { }

  ngOnInit() {
    this.service.notify$.subscribe(messages => {  DoSomethig(); });
  }

}

Answer 1

尝试

div {
  width: 400px;
  overflow-x: auto;
  white-space: nowrap;
}

div::-webkit-scrollbar {
  width: 1em;
}

div::-webkit-scrollbar-track {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

div::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #00bd86;
  outline: 2px solid slategrey;
}

div::-webkit-scrollbar:vertical {
  display: none;
}

<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
  survived not only five centuries, but also the leap into</div>

Answer 2

你必须覆盖滚动条 CSS 可能使用类

.only-this-horizon-scrollbar {
  ::-webkit-scrollbar {
    width: 5px;
    height: 5px;
  }
  ::-webkit-scrollbar-track {
    background: #f1f1f1; 
  }
  ::-webkit-scrollbar-thumb {
    background: #888; 
  }
  ::-webkit-scrollbar-thumb:hover {
    background: #555; 
  }
}