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上無效重點內容