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