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