一、设置一个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改变样式

Logo

前往低代码交流专区

更多推荐