点击按钮横向滚动左右滚动

展示

 

原理

隐藏超过部分，通过设置元素左侧的滚动距离，使元素向右向左滚动

1.scrollLeft：元素左侧已滚动的距离，即位于元素左边界与元素中当前可见内容的最左端之间的距离

2.scrollWidth:元素的整体宽度，包括由于溢出而无法展示在网页的不可见部分

3.clientWidth
:元素的可视宽度

代码

 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

注： service-title类中的需设置justify-content: space-between;  (首个元素放置于起点，末尾元素放置于终点)

.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;
  }
}