css设置滚动条样式，隐藏滚动条

css部分

/* 横向滚动容器 */
.scroll-wrapper {
	width: 100%;
	overflow-x: auto;
	height: 22px;
	white-space: nowrap;
	display: flex;
	-webkit-overflow-scrolling: touch;
}
.scroll-wrapper span {
	display: block;
	padding: 0 4px;
	margin: 0 10px;
	height: 20px;
	line-height: 20px;
	font-size: 14px;
	border: 1px solid #3884ff;
	border-radius: 20px;
	color: #3884ff;
}
/* 滚动条最外面轨道样式 :: 前面保留一个空格*/
.scroll-wrapper ::-webkit-scrollbar {
	width: 2px; /* 对纵向滚动条起作用*/
	height: 2px; /* 对横向滚动条起作用*/
	background: gray;
	display: none; /* 不显示滚动条 */
}

/* 滚动条最外面滑块样式 :: 前面保留一个空格*/
.scroll-wrapper ::-webkit-scrollbar-thumb {
	background: pink;
	border-radius: 2px;
	width: 2px; /* 对纵向滚动条起作用*/
	height: 2px; /* 对横向滚动条起作用*/
}

html结构

<div class="scroll-wrapper">
	<span>awesome</span>
	<span>awesome</span>
	<span>awesome</span>
	<span>awesome</span>
	<span>awesome</span>
	...
</div>

::-webkit-scrollbar 双冒号前记得保留一个空格，否则ios上隐藏滚动条在safari上无效

pc隐藏滚动条，.container为滚动的容器，需要设置固定的高度，在容器内垂直滚动，不会出现滚动条，预览地址，https://codesandbox.io/embed/winter-brook-cpq21?fontsize=14

.container {
  width: 500px;
  height: 200px;
  border: 1px solid red;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  /*IE下隐藏滚动条*/
  -ms-overflow-style: none;
  /*火狐下隐藏滚动条*/
  overflow: -moz-scrollbars-none;
  scrollbar-width: none;
}
.container::-webkit-scrollbar {
  display: none;
}