监听滚动条是否到达底部

最新推荐文章于 2024-09-18 00:05:41 发布

海绵老呆

最新推荐文章于 2024-09-18 00:05:41 发布

阅读量1.2k

点赞数 2

分类专栏： js vue 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/m0_37343874/article/details/122317830

版权

js 同时被 2 个专栏收录

20 篇文章 0 订阅

订阅专栏

vue

14 篇文章 0 订阅

订阅专栏

* scrollHeight 获取元素内容高度(只读)
* scrollTop 获取或者设置元素的偏移值,常用于, 计算滚动条的位置,
*  当一个元素的容器没有产生垂直方向的滚动条, 那它的scrollTop的值默认为0.
* clientHeight 读取元素的可见高度(只读)

1. 一般div的滚动条

在这里插入图片描述

 getScroll(event) {
      let scrollHeight = event.target.scrollHeight
      let scrollTop = event.target.scrollTop
      let clientHeight = event.target.clientHeight
      let scrollBottom = scrollHeight - scrollTop - clientHeight
      console.log(scrollBottom) // 滚动到底部的距离
      this.showMore = scrollBottom < 1 // 当scrollBottom为0时 滚动条到达底部 显示 查看详情
    },

2. element-ui 中table滚动条

在这里插入图片描述

 mounted () {
    this.dom = this.$refs.table.bodyWrapper
    this.dom.addEventListener('scroll', () => {
      // 滚动距离
      let scrollTop = this.dom.scrollTop
      let scrollHeight = this.dom.scrollHeight
      let clientHeight = this.dom.clientHeight
      let scrollBottom = scrollHeight - scrollTop - clientHeight
      console.log(scrollBottom) // 滚动到底部的距离
      this.showDetail = scrollBottom < 1 // 当scrollBottom为0时 显示 查看详情
    })
  },