【elementUi-table表格】 滚动条 新增监听事件; 滚动条滑动到指定位置;

1、给滚动条增加监听

javascript 复制代码
        this.dom = this.$refs.tableRef.bodyWrapper
        this.dom.scrollTop = 0
        let _that = this
        this.dom.addEventListener('scroll', () => {
          //获取元素的滚动距离
          let scrollTop = _that.dom.scrollTop
          //获取元素可视区域的高度
          let clientHeight = this.dom.clientHeight
          //获取元素滚动条的高度
          let scrollHeight = this.dom.scrollHeight

          if (scrollTop + clientHeight == scrollHeight) {
            //不是获取全部数据,而是加载新的数据
          }
          console.log(`scrollTop:  ${scrollTop}`)
          console.log(`clientHeight:  ${clientHeight}`)
          console.log(`scrollHeight:  ${scrollHeight}`)
        })

2、滚动条滑动到指定为止

只需要给scrollTop 赋值就行了

javascript 复制代码
//滚动条滑动到指定位置
this.dom.scrollTop = this.dom.scrollHeight + 300
相关推荐
小刘不知道叫啥5 小时前
React 源码揭秘 | 合成事件
前端·javascript·react.js
ziyue75756 小时前
vue修改element-ui的默认的class
前端·vue.js·ui
树叶会结冰6 小时前
HTML语义化:当网页会说话
前端·html
冰万森6 小时前
解决 React 项目初始化(npx create-react-app)速度慢的 7 个实用方案
前端·react.js·前端框架
牧羊人_myr6 小时前
Ajax 技术详解
前端
浩男孩7 小时前
🍀封装个 Button 组件,使用 vitest 来测试一下
前端
蓝银草同学7 小时前
阿里 Iconfont 项目丢失?手把手教你将已引用的 SVG 图标下载到本地
前端·icon
布列瑟农的星空7 小时前
重学React —— React事件机制 vs 浏览器事件机制
前端
一小池勺7 小时前
CommonJS
前端·面试