VUE 顶部滑动Scroll 组件

<template>
  <div class="max" style="width:100%;">
    <div class="outer" style="width:100%;overflow-x:auto;background-color:#FFFFFF;">
      <div style="display:flex;">
        <div v-for="(value,key) in list" :key="key">
          <div
            @click="active = key"
            :class="active == key?'change':''"
            style="height:2.1875rem;width:3.125rem;line-height:2.1875rem;font-size:.875rem;color:#999999;margin:0 1.25rem;text-align:center;">
          {
   
   {value}}
          </div>
          <div v-if="active === key" style="height:.125rem;background-color: green;margin:0 1.25rem;"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    list: {
      type:[],
      default: []
    }
  },
  data() {
    return {
      active: 0
    }
  },
  methods: {

  }
}
</script>

<style>
.max{
  position:sticky;
  top: 0px;
}
.outer::-webkit-scrollbar{
  display: none !important;
}
.change{
  color: green !important;
}
</style>