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>