1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > vue滚动条事件(获取滚动条距离底部距离)

vue滚动条事件(获取滚动条距离底部距离)

时间:2018-07-04 17:59:25

相关推荐

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) {// 滚动条距离底部的距离scrollBottomlet scrollBottom =event.target.scrollHeight -event.target.scrollTop -event.target.clientHeight;// if (this.finished && scrollBottom < 40) {// 操作// }},

好了,现在就获取到滚动条距离底部的距离了,可以用来做上拉加载操作或其他操作了

有什么bug欢迎各位留言!!谢谢

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。