vue:元素滚动到底部触发事件,隐藏滚动条及滚动条显示和隐藏切换
一、设置一个div元素,绑定滚动事件二、在methods中描述滚动事件三、设置CSS,让其内容超出高度时存在滚动条(overflow: auto;),然后隐藏滚动条(::-webkit-scrollbar{ display: none; })
·
一、设置一个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改变样式
更多推荐
已为社区贡献9条内容
所有评论(0)