愿所有的美好和期待都能如约而至

滚动距离

.markdown-body pre,.markdown-body pre>code.hljs{color:#333;background:#f8f8f8}.hljs-comment,.hljs-quote{color:#998;font-style:italic}.hljs-keyword,.hljs-selecto

发布时间:  来源:互联网  作者:匿名  标签:前端 滚动 距离  热度:37.5℃
  <div class="day_main" ref="dayBox">
      <div class="days" ref="dayList"  v-for="(item,index) in days" :key="index" :class="{act: index == day-1}" @click.prevent="changeDay(item)">
        <span v-html="replaceLangBR(lang.breeder_day_rank,getday(dateArr[item-1]))"></span>
      </div>
  </div>
  scrollToTag(){
      //三种方法
      // this.$refs.dayList[this.day].scrollIntoView({
      //     block:"start",
      //     behavior:"smooth"
      // })

      // // 单个长度(总的长度除以数量求平均)
      // const singeWidth = this.$refs.dayBox.scrollWidth / this.days;
      // // 外盒子滚动长度
      // this.$refs.dayBox.scrollLeft = singeWidth * (this.day-1);

      // 单个长度(Dom元素去获取长度)
      let boxItemWidth = this.$refs.dayList[0].scrollWidth;
      this.$refs.dayBox.scrollTo(((boxItemWidth * this.day) - boxItemWidth), 0);
    }

勇敢去编程!

勇敢的热爱编程,未来的你一定会大放异彩,未来的生活一定会因编程更好!

TOP