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

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

vue:元素滚动到底部触发事件,隐藏滚动条及滚动条显示和隐藏切换_第1张图片

@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; }
vue:元素滚动到底部触发事件,隐藏滚动条及滚动条显示和隐藏切换_第2张图片

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

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

你可能感兴趣的:(vue,vue)