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歡迎各位留言!!謝謝


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM