JS通过按钮控制容器左右滚动

该功能我是在vue环境下实现

1、容器设置滚动并隐藏滚动条

.content {
  overflow-x: scroll;
}
.content::-webkit-scrollbar-track {
  display: none;
}

2、添加左右箭头按钮并绑定事件

<div
  @mousedown="scrollLeft"
  @mouseup="stopScroll"
  @mouseleave="stopScroll"
>
  <el-button
    type="text"
    icon="el-icon-caret-left"
    class="scrollLeftBtn"
  ></el-button>
</div>

<div
  @mousedown="scrollRight"
  @mouseup="stopScroll"
  @mouseleave="stopScroll"
>
  <el-button
    type="text"
    icon="el-icon-caret-right"
    class="scrollRightBtn"
  ></el-button>
</div>

3、实现左右滚动相关方法

scrollLeft() {
    
    
  this.stopScroll();
  this.timer = setInterval(() => {
    
    
    this.$refs.content.scrollLeft -= step;
  }, 100);
},
scrollRight() {
    
    
  this.stopScroll();
  this.timer = setInterval(() => {
    
    
    this.$refs.content.scrollLeft += step;
  }, 100);
},
stopScroll() {
    
    
  clearInterval(this.timer);
},

4、如果需要根据是否滚动到最左或最右来判断显示左右按钮，可以绑定下面方法

handleScroll() {
    
    
  let contentRef = this.$refs.content;
  if(contentRef.scrollWidth != contentRef.clientWidth){
    
    
    if (contentRef.scrollLeft <= 0) {
    
    
      this.isScrollLeftBtn = false;
    } else {
    
    
      this.isScrollLeftBtn = true;
    }
    if (Math.ceil(contentRef.scrollLeft - (contentRef.scrollWidth - contentRef.clientWidth)) >= 0) {
    
    
      this.isScrollRightBtn = false;
    } else {
    
    
      this.isScrollRightBtn = true;
    }
  }else{
    
    
    this.isScrollLeftBtn = false;
    this.isScrollRightBtn = false;
  }
},

isScrollLeftBtn：是否显示左箭头按钮
isScrollRightBtn：是否显示右箭头按钮