scrollIntoView 的使用

 （一）项目背景

秒杀时间 tab, 横向 n 多 tab-item,最外层 overflow: scroll，点击 item 的时候，如果在视野区域外，希望滚动到视野区域内~

（二）实现代码

<template>
  <div id="app">
    <div class="tab-wrapper">
      <div
        ref="tab"
        @click="itemClick(index)"
        class='tab-item'
        v-for="(item, index) of 5"
        :key="index"
      >
        {{ index + 1 }}
      </div>
    </div>
  </div>
</template>

<style>
.tab-wrapper {
  height: 50px;
  width: 200px;
  border: 1px solid black;
  overflow-x: scroll;
  overflow-y: auto;
  display: flex;
}

.tab-item {
  height: 50px;
  width: 50px;
  flex-shrink: 0;
  border: 1px solid #ccc;
}
</style>

<script>
export default {
  methods: {
    // 点击哪个让哪个出现在视野中
    itemClick(index) {
      this.$refs.tab[index].scrollIntoView({ block: 'nearest', inline: 'center' })
    }
  }
}
</script>

（三） 知识点

1. v-for 数组用 in array, 固定循环几次，用 v-for of 次数

2. flex布局下overflow失效问题，虽然宽度超出，没有产生横向滚动条，元素的 width 属性并没有起作用~

flex-shrink 属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。

目前是收缩了，赋值为0， 则不让item收缩~

注意：如果元素不是弹性盒对象的元素，则 flex-shrink 属性不起作用.

具体用法参考文章：https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollIntoView