Click the button to scroll horizontally and scroll left and right

exhibit

 

principle

Hide the excess part, and make the element scroll right to left by setting the scroll distance on the left side of the element

1.scrollLeft: The scrolled distance on the left side of the element , that is, the distance between the left border of the element and the leftmost end of the currently visible content in the element

2.scrollWidth: The overall width of the element , including the invisible part that cannot be displayed on the web page due to overflow

3.clientWidth
: The visual width of the element

the code

 template

<el-row class="app-container">
    <el-col :span="1" class="service-title-scroll">
      <a class="el-icon-caret-left" @click="leftSlide"></a>
    </el-col>
    <el-col :span="22">
      <div ref="wrapperCon" class="service-title">
        <div v-for="(item, index) in title" :key="index">
          <a class="service-title-block">{
   
   {item.name}}</a>
        </div>
      </div>
    </el-col>
    <el-col :span="1" class="service-title-scroll">
      <a class="el-icon-caret-right" @click="rightSlide"></a>
    </el-col>
  </el-row>

JavaScript

export default {
  name: 'index',
  data() {
    return {
      timer: null,
      title: [{
        id: '1',
        name: '测试'
      }, {
        id: '2',
        name: '测试'
      }, {
        id: '3',
        name: '测试'
      }, {
        id: '4',
        name: '测试'
      }, {
        id: '5',
        name: '测试'
      }, {
        id: '6',
        name: '测试'
      }, {
        id: '7',
        name: '测试'
      }, {
        id: '8',
        name: '测试'
      }, {
        id: '9',
        name: '测试'
      }, {
        id: '10',
        name: '测试'
      }, {
        id: '11',
        name: '测试'
      }, {
        id: '12',
        name: '测试'
      }],
    }
  },
  methods: {
    leftSlide(){
      // 保存滚动盒子左侧已滚动的距离
      let left=this.$refs.wrapperCon.scrollLeft
      let num=0
      clearInterval(this.timer)
      this.timer=null
      this.timer=setInterval(()=>{
        //   !left:已经滚动到最左侧
        //   一次性滚动距离（可调节）
        if(!left||num>=300){
          // 停止滚动
          clearInterval(this.timer)
          this.timer=null
          return
        }
        // 给滚动盒子元素赋值向左滚动距离
        this.$refs.wrapperCon.scrollLeft=left-=30
        // 保存向左滚动距离（方便判断一次性滚动多少距离）
        num+=30
      },20)
      // 20：速度（可调节）
    },
    rightSlide(){
      // 保存滚动盒子左侧已滚动的距离
      let left=this.$refs.wrapperCon.scrollLeft
      // 保存元素的整体宽度
      let scrollWidth=this.$refs.wrapperCon.scrollWidth
      // 保存元素的可见宽度
      let clientWidth=this.$refs.wrapperCon.clientWidth
      let num=0
      clearInterval(this.timer)
      this.timer=setInterval(()=>{
        // 已经滚动距离+可见宽度
        // left+clientWidth>=scrollWidth：滚动到最右侧
        // num>=300一次性滚动距离
        if(left+clientWidth>=scrollWidth||num>=300){
          clearInterval(this.timer)
          return
        }
        // 给滚动盒子元素赋值向左滚动距离
        this.$refs.wrapperCon.scrollLeft=left+=30
        // 保存向左滚动距离（方便判断一次性滚动多少距离）
        num+=30
      },20)
      // 20：速度（可调节）
    },
  }
}

style

Note: Justify-content: space-between; needs to be set in the service-title class (the first element is placed at the starting point, and the last element is placed at the end point)

.service-title{
  display: flex;
  justify-content: space-between;
  overflow: hidden;
  height: 35px;
}
.service-title-scroll {
  font-size: 30px;
  text-align: center;
  height: 35px;
  line-height: 35px;
}
.service-title-block {
  text-align: center;
  width: 130px;
  margin: 0 10px;
  box-shadow:inset 0 1px 0 0 #fff6af;
  background: #ffec64 linear-gradient(to bottom, #ffec64 5%, #ffab23 100%);
  border-radius:6px;
  border:1px solid #ffaa22;
  display:inline-block;
  cursor:pointer;
  color:#333333;
  font-size:15px;
  font-weight:bold;
  padding:6px 24px;
  text-decoration:none;
  text-shadow:0 1px 0 #ffee66;
  &:hover {
    background: #ffab23 linear-gradient(to bottom, #ffab23 5%, #ffec64 100%);
  }
  &:active {
    position:relative;
    top:5px;
  }
}