vue：元素滚动到底部触发事件，隐藏滚动条及滚动条显示和隐藏切换

一、设置一个div元素，绑定滚动事件

@scroll="scrollEvent"

二、在methods中描述滚动事件

scrollEvent (e) {
  if (Math.ceil(e.srcElement.scrollTop) + e.srcElement.clientHeight === e.srcElement.scrollHeight) {
    // this.scrollHandler(this.dataWorkQueue[this.clickItemIndex], this.clickItemIndex)
    // 这里可以写滚轮滚到元素底部时触发的操作，示例中触发的是一个methods方法
  }
},

三、设置CSS，让其内容超出高度时存在滚动条（overflow: auto;），然后隐藏滚动条（::-webkit-scrollbar{ display: none; }）

.queue-content {
  height: calc(100vh - 278px);
}
.scroll {
  height: calc(100vh - 285px);
  overflow: auto;
  width: 100%;
}
.scroll::-webkit-scrollbar {
  display: none;
}

四、上述方式，显然还可以优化，即鼠标移上去显示滚动条，鼠标离开隐藏滚动条，参考文章：鼠标事件通过class改变样式