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

本文介绍: 好久都没更新过了，大概有一年时间没写过了，这一年实在是太松懈了，遇到点新的东西就想写下来，但是都是没什么时间，等有时间了就忘记了…可能这一年留给生活的时间更多一点叭大概是上个月，遇上了个点击左右滚动这么一个小交互，本人对于动态交互这些东西一直都不怎么擅长，不然也不至于一个左右点击滚动也要记下来，当然本次记录也是想给大家提供个参考。写的时候百度了挺多的，但是都挺复杂的，本人没啥耐心，第一眼看着复杂的基本上就不会往下看了，so，干脆自己写一套吧，本人感觉本人的这个思路，算得上是很简单的了！！首先.

好久都没更新过了，大概有一年时间没写过了，这一年实在是太松懈了，遇到点新的东西就想写下来，但是都是没什么时间，等有时间了就忘记了…可能这一年留给生活的时间更多一点叭

大概是上个月，遇上了个点击左右滚动这么一个小交互，本人对于动态交互这些东西一直都不怎么擅长，不然也不至于一个左右点击滚动也要记下来，当然本次记录也是想给大家提供个参考。写的时候百度了挺多的，但是都挺复杂的，本人没啥耐心，第一眼看着复杂的基本上就不会往下看了，so，干脆自己写一套吧，本人感觉本人的这个思路，算得上是很简单的了！！

首先呢，先写好样式，左右滚动，肯定就是横向的了

分配一下每个元素的角色

在这里插入图片描述

html

    &lt;div id="click-scroll-X"&gt;
    &lt;span class="left_btn" @click="leftSlide">《</span>
    <div class="scroll_wrapper" ref="wrapperCon">
        <div class="scroll_list">
            <div class="item" v-for="(i, idx) in 10" :key="idx">
                我是子元素{{ idx }}
            </div>
        </div>
    </div>
    <div class="right_btn" @click="rightSlide">》</div>
  </div>

css

#click-scroll-X {
    display: flex;
    align-items: center;
    .left_btn,.right_btn {
      font-size: 30px;
      cursor: pointer;
    }
  .scroll_wrapper {
    width: 600px;
    overflow-x: scroll;
    padding: 20px 0;
    .scroll_list{
    display: flex;
    align-items: center;
    justify-content: space-between;
        .item {
        width: 100px;
        height: 100px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid red;
        box-sizing: border-box;
        flex-shrink: 0;
        }
    }
  }

接下来了解一下需要用到的属性

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

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

3.clientWidt h:元素的可视宽度

data(){
    return{
        // 定时器（方便清除）
        timer:null
    }
}

向左滚动

    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：速度（可调节）
      }