js tag标签点击滚动到中央

说明：

当标签不够或者是在最两边的标签在可视区范围，点击以上标签则

滚到可是区内部，如果是其他的标签则滚动到可视区中间显示

效果如下

代码如下：

<template>
  <div class="app">
    <div>
      <div class="buttonAdd" @click="addOneTag">前边添加一个</div>
      <div class="buttonSub" @click="subOneTag">前边减去一个</div>
      <div class="box" >
        <div class="left" @click="clickLeft">左</div>
        <div class="outWrap">
          <div class="content"
               v-for="(item,index) in dataList"
               :key="item"
               @click="contentClick(index,$event)"
          >
            {{item}}
          </div>
        </div>
        <div class="right" @click="clickRight">右</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'app',
  data(){
      return {
          dataList:[],
      }
  },
  methods:{
    contentClick(index,e){
        let outWrap = document.querySelector(".outWrap")
        console.log("e.target.offsetLeft",e.target.offsetLeft)
        let outWrapOffsetWidth = outWrap.offsetWidth
        let outWrapScrollWidth = outWrap.scrollWidth
        let centerWidth = outWrapOffsetWidth/2
        // 为啥要减个36，这个36是咋来的，这个36是第一个标签的offsetLeft
        // 更准确的说是.outWrap这个标签没有滚动之前的offsetLeft
        let clickPoint = e.target.offsetLeft-36+e.target.offsetWidth/2
        if(clickPoint<centerWidth){
            outWrap.scrollLeft = 0
        }else if(clickPoint>outWrapScrollWidth-centerWidth){
            outWrap.scrollLeft = outWrapScrollWidth
        }else {
            outWrap.scrollLeft = clickPoint-centerWidth
        }
    },
    //  点击滚到最左边
    clickLeft(){
        let outWrap = document.querySelector(".outWrap")
        outWrap.scrollLeft = 0
    },
    // 点击滚到最右边
    clickRight(){
        let outWrap = document.querySelector(".outWrap")
        outWrap.scrollLeft = outWrap.offsetWidth+300
    },
    //  添加一个tag标签
    addOneTag(){
        let timeStamp = new Date().getTime()
        this.dataList.splice(0,0,"content"+timeStamp)
    },
    // 删除一个tag标签
    subOneTag(){
        if(this.dataList.length>0){
            this.dataList.splice(0,1)
        }
    },
  }
}
</script>

<style lang="less" scoped>
  .buttonAdd,.buttonSub{
    background-color: yellowgreen;
    width: 200px;
    height: 50px;
    float: left;
    margin-top: 300px;
    text-align: center;
    line-height: 50px;
  }
  .buttonSub{
    background-color: pink;
  }
  .box{
    width: 100%;
    height: 50px;
    background-color: pink;
    /*为了更好的表达效果，就是滚动条不显示出来
    就必需在父标签上hidden了*/
    overflow: hidden;
    border: 1px solid black;
    .left{
      float: left;
      width: 50px;
      height: 50px;
      border: 1px solid black;
    }
    .outWrap{
      float: left;
      width: calc(100% - 100px);
      /*这个高度为啥是72，原因是overflow-x: auto;则会
      产生一个横向的滚动条，但是我们不想要这个滚动条就
      需要将此滚动条给超出内容区然后在父标签上给hidden了*/
      height: 72px;
      /*text-align: center;*/
      line-height: 50px;
      background-color: greenyellow;
      overflow-x: auto;
      overflow-y: hidden;
      white-space: nowrap;
      .content{
        display: inline-block;
        width: 400px;
        text-align: center;
        height: 50px;
        border-left: 1px solid black;
        border-right: 1px solid black;
      }
    }
    .right{
      float: right;
      width: 50px;
      height: 50px;
      border: 1px solid black;
    }
  }

</style>

改进后：

<template>
  <div class="tags">
    <div>
<!--      <div class="buttonAdd" @click="addOneTag">前边添加一个</div>-->
<!--      <div class="buttonSub" @click="subOneTag">前边减去一个</div>-->
      <div class="box" >
        <div class="left" @click="clickLeft">左</div>
        <div class="outWrap">
          <div class="content"
               v-for="(item,index) in dataList"
               :key="item+index"
               @click="contentClick(index,$event)"
          >
            {{item}}
          </div>
        </div>
        <div class="right" @click="clickRight">右</div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: "tags",
    props: {
      dataList: {
        type: Array,
        default: () => {
          return []
        }
      },
    },
    data(){
      return {
        // dataList:[],
      }
    },
    methods:{
      contentClick(index,e){
        let outWrap = document.querySelector(".outWrap")
        // let box = document.querySelector(".box")
        // console.log("e.target.offsetLeft",e.target.offsetLeft)
        // console.log("e.target.clientWidth",e.target.clientWidth)
        // console.log("e.target.offsetWidth",e.target.offsetWidth)
        // console.log("e.target.width",e.target.width)
        // let targetWidth = e.target.clientWidth
        let outWrapOffsetWidth = outWrap.offsetWidth
        let outWrapScrollWidth = outWrap.scrollWidth
        // let boxClientWidth = box.clientWidth

        // console.log("outWrap.offsetWidth",outWrap.offsetWidth)
        // console.log("outWrap.offsetLeft",outWrap.offsetLeft)
        // console.log("outWrap.scrollWidth",outWrap.scrollWidth)
        // console.log("box.clientWidth",boxClientWidth)
        let centerWidth = outWrapOffsetWidth/2
        // 为啥要减个36，这个36是咋来的，这个36是第一个标签的offsetLeft
        // 更准确的说是.outWrap这个标签没有滚动之前的offsetLeft
        let clickPoint = e.target.offsetLeft-36 - outWrap.offsetLeft+e.target.offsetWidth/2
        if(clickPoint<centerWidth){
          outWrap.scrollLeft = 0
        }else if(clickPoint>outWrapScrollWidth-centerWidth){
          outWrap.scrollLeft = outWrapScrollWidth
        }else {
          outWrap.scrollLeft = clickPoint-centerWidth
        }
      },
      //  点击滚到最左边
      clickLeft(){
        let outWrap = document.querySelector(".outWrap")
        outWrap.scrollLeft = 0
      },
      // 点击滚到最右边
      clickRight(){
        let outWrap = document.querySelector(".outWrap")
        // scrollWidth 可见区宽度+超出隐藏的宽度
        outWrap.scrollLeft = outWrap.scrollWidth
      },
      //  添加一个tag标签
      addOneTag(){
        let timeStamp = new Date().getTime()
        this.dataList.splice(0,0,"content"+timeStamp)
      },
      // 删除一个tag标签
      subOneTag(){
        if(this.dataList.length>0){
          this.dataList.splice(0,1)
        }
      },
    }
  }
</script>

<style lang="less" scoped>
  .buttonAdd,.buttonSub{
    background-color: yellowgreen;
    width: 200px;
    height: 50px;
    float: left;
    /*margin-top: 300px;*/
    text-align: center;
    line-height: 50px;
  }
  .buttonSub{
    background-color: pink;
  }
  .box{
    width: 100%;
    height: 50px;
    background-color: pink;
    /*为了更好的表达效果，就是滚动条不显示出来
    就必需在父标签上hidden了*/
    overflow: hidden;
    border: 1px solid black;
    .left{
      float: left;
      width: 30px;
      height: 50px;
      border: 1px solid black;
    }
    .outWrap{
      float: left;
      width: calc(100% - 60px);
      /*这个高度为啥是72，原因是overflow-x: auto;则会
      产生一个横向的滚动条，但是我们不想要这个滚动条就
      需要将此滚动条给超出内容区然后在父标签上给hidden了*/
      height: 72px;
      /*text-align: center;*/
      line-height: 50px;
      background-color: greenyellow;
      overflow-x: auto;
      overflow-y: hidden;
      white-space: nowrap;
      .content{
        display: inline-block;
        /*width: 400px;*/
        text-align: center;
        padding: 0 20px;
        margin-right: 10px;
        height: 50px;
        border-left: 1px solid black;
        border-right: 1px solid black;
      }
    }
    .right{
      float: right;
      width: 30px;
      height: 50px;
      border: 1px solid black;
    }
  }

</style>