vue滚动条事件(获取滚动条距离底部距离)
网上大部分vue的滚动条操作是监听dom实现,我是用@scroll实现
首先有滚动条的div一定要设固定高度,然后overflow:auto;出现滚动条
passive是使滚动更加流畅,减少卡顿
<div @scroll.passive="getScroll($event)" style="height:100px;overflow:auto;"> <ul> <li>内容</li> </ul> </div>
然后在方法中获取到滚动条距离底部距离
getScroll(event) { // 滚动条距离底部的距离scrollBottom let scrollBottom = event.target.scrollHeight - event.target.scrollTop - event.target.clientHeight; // if (this.finished && scrollBottom < 40) { // 操作 // } },
好了,现在就获取到滚动条距离底部的距离了,可以用来做上拉加载操作或其他操作了
有什么bug欢迎各位留言!!谢谢