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

网上大部分vue的滚动条操作是监听dom实现,我是用@scroll实现

首先有滚动条的div一定要设固定高度,然后overflow:auto;出现滚动条

<div @scroll="getScroll" style="height:100px;overflow:auto;">
    <ul>
      <li>内容</li>
    </ul>
 </div>

然后在方法中获取到滚动条距离底部距离

getScroll() {
      // 滚动条距离底部的距离scrollBottom
      let scrollBottom =
        event.target.scrollHeight -
        event.target.scrollTop -
        event.target.clientHeight;
      // if (this.finished && scrollBottom < 40) {
      //  操作
      // }
    },

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

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

猜你喜欢

转载自www.cnblogs.com/yck123/p/10978941.html
今日推荐