点击左右箭头实现内容滑动

实现效果：
1、通过点击左右箭头实现内容滑动
2、点击＋添加标签
3、点击×删除标签
4、点击标签
实现思路：
1、position布局

1 、通过点击左右箭头实现内容滑动

代码：
html

<!-- 可滑动区域和操作可滑动区域的icon -->
        <div class="scrollTab">
            <i class="el-icon-caret-left" @click="leftClick"></i>
            <!-- 显示的区域 -->
            <div id="classifyScroll">
                <!-- 滑动的区域 -->
                <div class="classifys">
                    <!-- 单个标签 -->
                    <div
                        class="classifys-item"
                        :class="index == currentFlowIndex ? 'classifys-activeItem' : 'classifys-item'"
                        v-for="(item, index) in flowList"
                        :key="index"
                        :ref="`item${index}`"
                        @click="changeFlow(item, index)"
                        @dblclick="changeCurrentFlow(item, index)"
                    >
                        <p>{{ item.backEnd.name ? item.backEnd.name : '空白页' }}</p>
                        <i class="el-icon-close" @click.stop="closeFlowList(index)"></i>
                    </div>
                </div>
            </div>
            <i class="el-icon-plus" style="font-weight:500;" @click="addFlowList"></i>
            <i class="el-icon-caret-right" @click="rightClick"></i>
 </div>

scss

.scrollTab {
   width: calc(100% - 170px);
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-left: 170px;
   #classifyScroll {
       width: calc(100% - 45px);
       height: 36px;
       overflow: hidden;
       transition: all 0.3s;
       position: relative;
       display: flex;
       justify-content: flex-start;
       align-items: center;
       .classifys {
           position: absolute;
           left: 0px;
           height: 36px;
           transition: all 0.3s;
           width: auto;
           display: flex;
           align-items: center;
           background: #f0f0f0;
           &-item {
               width: 140px;
               font-size: 15px;
               font-weight: 400;
               color: #000;
               padding: 8px 0px 8px 6px;
               box-sizing: border-box;
               background: #f0f0f0;
               display: flex;
               justify-content: space-between;
               align-items: center;
               > p {
                   width: 140px;
                   overflow: hidden;
                   text-overflow: ellipsis;
                   white-space: nowrap;
               }
               > i {
                   margin-right: 8px;
               }
               > i:hover {
                   cursor: pointer;
               }
           }
           &-activeItem {
               background: #fff;
               // border-top-right-radius: 10px;
           }
           &-item:hover {
               cursor: pointer;
           }
       }
   }
}

js
点击左箭头

leftClick() {
    // 在点击的时候判断可滑动区域的left是否大于-20（因为我在左右点击的时候每次移动20px，所以需要判断是否大于20；）
    // 小于：直接将left设置为0
    // 大于：left则加20
    if (document.getElementsByClassName('classifys')[0].offsetLeft >= -20) {
        document.getElementsByClassName('classifys')[0].style.left = 0 + 'px';
    } else {
        document.getElementsByClassName('classifys')[0].style.left = document.getElementsByClassName('classifys')[0].offsetLeft + 20 + 'px';
    }
}

点击右箭头

rightClick() {
     // 在点击的时候判断可滑动区域的left+可视区域的宽度是否大于可滑动区域的宽度
     // 大于：则left为可视区域的宽度-可滑动区域的宽度
     // 小于：当前的可滑动区域的left-20即可
     if (
         document.getElementsByClassName('classifys')[0].scrollWidth +
             document.getElementsByClassName('classifys')[0].offsetLeft -
             20 <=
         document.getElementById('classifyScroll').offsetWidth
     ) {
         document.getElementsByClassName('classifys')[0].style.left =
             document.getElementById('classifyScroll').offsetWidth -
             document.getElementsByClassName('classifys')[0].scrollWidth +
             'px';
     } else {
         document.getElementsByClassName('classifys')[0].style.left =
             document.getElementsByClassName('classifys')[0].offsetLeft - 20 + 'px';
     }
 }

2、点击＋添加标签

此处需要注意的是，在添加标签的时候，可滑动区域的left应该为多少
判断：如果可滑动区域的宽度大于了可显示的区域，那么可滑动区域的left=可显示区域的宽度-可滑动区域的宽度

if (document.getElementsByClassName('classifys')[0].scrollWidth > document.getElementById('classifyScroll').offsetWidth) {
    document.getElementsByClassName('classifys')[0].style.left =
        document.getElementById('classifyScroll').offsetWidth -
        document.getElementsByClassName('classifys')[0].scrollWidth +
        'px';
}

3、点击×删除标签

此处需要注意的与添加标签时碰到的问题类似
判断：
（1）如果可滑动区域的宽度小于可显示的区域，那么可滑动区域的left= 0px
（2）如果可滑动区域的宽度大于可显示的区域，那么可滑动区域的left=当前的可滑动区域的left+140 + ‘px’。因为我给标签设置的宽度为140px，如果删除一个标签，那么理应给left+140

if (document.getElementsByClassName('classifys')[0].scrollWidth <= document.getElementById('classifyScroll').offsetWidth) {
    document.getElementsByClassName('classifys')[0].style.left = 0 + 'px';
} else {
    document.getElementsByClassName('classifys')[0].style.left =
        document.getElementsByClassName('classifys')[0].offsetLeft + 140 + 'px';
}

4、点击标签

此处需要注意的是在点击标签时，如果标签现在一半显示一半未显示，那么可滑动区域的left该怎么设置呢
标签的一半显示和一般未显示分为两种情况：

第一个红框圈起来的则为前半部分未显示，后半部分显示的情况
第二个红框圈起来的则为后半部分未显示，前半部分显示的情况
下方出现的index为当前点击的标签在数组中的位置
判断一：index*140 < 可滑动区域的left的值，那么证明，这个标签前半部分是被隐藏的，所以在点击它的时候，需要把前半部分显示出来，所以将可滑动区域的left设置为 index * -140 + ‘px’
判断二：(index+1)*140 > 可滑动区域的left + 可显示区域的宽度，那么证明在，这个标签的后半部分是被隐藏的，所以在点击它的时候，需要把后半部分显示出来，所以将可滑动区域的left设置为document.getElementById(‘classifyScroll’).offsetWidth - (index + 1) * -140 + ‘px’

if (document.getElementsByClassName('classifys')[0].scrollWidth > document.getElementById('classifyScroll').offsetWidth) {
    if (index * 140 < Math.abs(document.getElementsByClassName('classifys')[0].offsetLeft)) {
        document.getElementsByClassName('classifys')[0].style.left = index * -140 + 'px';
    } else if (
        (index + 1) * 140 >
        document.getElementById('classifyScroll').offsetWidth -
            document.getElementsByClassName('classifys')[0].offsetLeft
    ) {
        document.getElementsByClassName('classifys')[0].style.left =
            document.getElementById('classifyScroll').offsetWidth - (index + 1) * 140 + 'px';
    }
}

有问题欢迎来问！！！