【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
相关推荐
AI浩6 小时前
【Labelme数据操作】LabelMe标注批量复制工具 - 完整教程
运维·服务器·前端
涔溪6 小时前
CSS 网格布局(Grid Layout)核心概念、基础语法、常用属性、实战示例和进阶技巧全面讲解
前端·css
2401_878454536 小时前
浏览器工作原理
前端·javascript
西陵7 小时前
为什么说 AI 赋能前端开发,已经不是选择题,而是必然趋势?
前端·架构·ai编程
by__csdn8 小时前
Vue3 setup()函数终极攻略:从入门到精通
开发语言·前端·javascript·vue.js·性能优化·typescript·ecmascript
天天扭码8 小时前
前端如何实现RAG?一文带你速通,使用RAG实现长期记忆
前端·node.js·ai编程
Luna-player9 小时前
在前端中,<a> 标签的 href=“javascript:;“ 这个是什么意思
开发语言·前端·javascript
lionliu05199 小时前
js的扩展运算符的理解
前端·javascript·vue.js
小草cys9 小时前
项目7-七彩天气app任务7.4.2“关于”弹窗
开发语言·前端·javascript
奇舞精选9 小时前
GELab-Zero 技术解析:当豆包联手中兴,开源界如何守住端侧 AI 的“最后防线”?
前端·aigc