網上大部分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歡迎各位留言!!謝謝
