内容横向滚动不显示滚动条

效果

//html
<template>
  <div class="categories">
    <template v-for="(item, index) in categorieslists" :key="item.id">
      <div class="categories-info">
        <img class="info-img" :src="item.pictureUrl" alt="" />
        <div class="info-text">{{ item.title }}</div>
      </div>
    </template>
  </div>
</template>

//css
.categories {
  display: flex;
  padding-left: 15px;
  //设置横向滚动
  overflow-x: auto;
  //隐藏滚动条
  &::-webkit-scrollbar {
    display: none;
  }
  .categories-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 15px;

    .info-img {
      width: 35px;
      margin-bottom: 5px;
    }
    .info-text {
      font-size: 12px;
      width: 50px;
      text-align: center;
    }
  }
}