vue @scroll 监听滚动事件，让你一看就明白

最新推荐文章于 2024-07-02 16:22:25 发布

Pilot Schuck

最新推荐文章于 2024-07-02 16:22:25 发布

阅读量1w

点赞数 4

文章标签： javascript html css

本文链接：https://blog.csdn.net/weixin_46683341/article/details/119025865

版权

文章目录

①在元素标签上直接绑定 scroll 事件
②再给这个div一个样式，肯定得有一个高度啥的。
③前面传过来一个然后可以通过$event事件获取scrollTop之类的
总结

百度了一些这类的文章，写的不是特别容易理解，打算自己写一篇笔记。

做首页按需加载的时候滚动条滚动到底部之后加载或者一个移动端出现一个弹框滑动到底部触发事件

①在元素标签上直接绑定 scroll 事件

 <div class="dialogCountent" ref="dialogCountent" @scroll="orderScroll($event)">
     ...
 </div>

注意：重点在ref和@scroll上面，后面会用到

②再给这个div一个样式，肯定得有一个高度啥的。

 .dialogCountent{
     height: 2.6rem;
     overflow-y: scroll
 }

介绍一下三个值：（知道的可以跳过这块）

clientHeight：

元素客户区的大小，指的是元素内容及其边框所占据的空间大小（经过实践取出来的大多是视口大小）

例子：可以用公式 CSS height + CSS padding - 水平滚动条的高度 (如果存在) 来计算。

在这里插入图片描述

如图，这样一个div，它的clientHeight为95，计算：50(height)+30(padding-top)+30(padding-bottom)-15(经测量滚动条高度就是15)=95

scrollHeight：

因为限制了父元素的高度，所以不能全部显示子元素，设置了overflow之后，可以通过滚动条的形式滑动查看子元素。效果如图1，如果没有限制父元素的高度，那么效果将如图2显示。

在这里插入图片描述

scrollHeight就是图2的高度，没有高度限制时，能够完全显示子元素时的高度（clientHeight）。所以这里scrollHeight为220，计算：200+10+10=220

scrollTop

设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离

③前面传过来一个然后可以通过$event事件获取scrollTop之类的

定义三个变量用来接收event上三个值。

 scrollGet(e) {
            let scrollHeight = this.$refs.dialogCountent.scrollHeight;
            let clientHeight = this.$refs.dialogCountent.clientHeight;
            let scrollTop = this.$refs.dialogCountent.scrollTop;
            if(scrollHeight - (scrollTop+clientHeight) <= 1 ){
                this.isRead = true; //  这是一个disabled的显示，自己定义的
                this.confirmText = '同意' // 更改一个内容文字
            }
  }