首页 > 其他分享 >【elementUi】组件el-scrollbar监控滚动事件

【elementUi】组件el-scrollbar监控滚动事件

时间:2023-02-13 19:56:32浏览次数:42  
标签:el scrollbarEl elementUi refs wrap scrollbar 组件

ElementUi的el-scrollbar组件

<el-scrollbar style="height: 50vh" ref="scrollbar">


</el-scrollbar>

 

 

写个事件来监听该组件的滚动事件

handleScroll() {
      let scrollbarEl = this.$refs.scrollbar.wrap;
      scrollbarEl.onscroll = () => {
        if (scrollbarEl.scrollTop == 0) {
          console.log("滚动到顶部了");
        }
      };
    }

 

this.$refs.scrollbar.wrap.scrollTop  为滚动条位置

 this.$refs.scrollbar.wrap.scrollHeight为滚动条高度

 

标签:el,scrollbarEl,elementUi,refs,wrap,scrollbar,组件
From: https://www.cnblogs.com/Hello233/p/17117584.html

相关文章

  • 关于shell中的while文本重定向问题
    #!/bin/bashcatvscode_tutor.txt|whilereadlinedoecho$line>hello.txtdone那么重定向第一次过后,就会跳出while循环。只会把vscode_tutor.txt的第一......
  • Excel学习
    近期打算恶补excel的知识(大学就知道玩了,基础都没学会)!!!1、Excel工作表中,编码与分类信息以“编码|分类”的格式显示在了一个数据列内,若将编码与分类分为两列显示,最优的操......
  • 关于GORM Gen自动生成Model却没有外键的问题
    写的非常好的链接,问题和解决方案都给出了:关于GORM外键失效问题二(解决)以及这个链接所引申出来的问题:为什么大家很少使用外键了数据库物理外键、逻辑外键为什么大多数......
  • 为什么leveldb/rocksdb只允许一个线程修改memtable?
    leveldb/rocksdb采用deque控制多线程只允许一个线程修改memtable,是由于memtable不存在读-写冲突(采用MVCC,保证Sequence一定不同,memtable的key就一定不同,update/delete/ins......
  • 使用 PHP 和 Laravel 构建 REST API 的教程
    RepresentationalStateTransfer( ​​REST​​ )是一种用于构建Web服务的流行软件架构样式。RESTAPI允许客户端通过向特定端点或“路由”发出HTTP请求来从服务......
  • 读写锁(ReentrantReadWriteLock)
    读写锁​​1、读写锁介绍​​​​2、读写锁入门案例​​​​3、锁降级测试​​​​4、小结​​1、读写锁介绍  现实中有这样一种场景:对共享资源有读和写的操作,且写操作没......
  • laravel 分表日志功能
    1.生成定时任务,自动出案件表命令行创建定时任务生成脚本  phpartisanmake:commandCreateLog脚本CreateLog的handle方法生成分表的表名if(!Schema......
  • 数据库导出excel信息(mysql数据库已经验证)
    导出表信息1SELECT2TABLE_NAME表名,3REPLACE(4REPLACE(TABLE_COMMENT,CHAR(10),''),5CHAR(13),6','7......
  • 【题解】CF1500B Two chandeliers
    题目分析:感觉这个题难度虚高,怕是因为一般不用翻译软件翻译输入输出格式(如果我们关注到了输入格式的话就可以发现一个很有用的地方,就是\(a\)和\(b\)单个序列内包含的......
  • 怎么使用 Scrapy 框架自带的 pipelines
    目录定义一个item启用默认的FilesPipeline配置一个下载路径(FILE_STORE)调用items主文件下载做法精细化操作定义一个item参数要设置为file_urls和files调用时fi......