vue @scroll监听滚动条事件方式
vue@scroll监听滚动条事件
为啥要使用@scroll监听滚动条事件没用在vue.js开发前我们监听滚动条事件都是在window挂监听事件
例如：
window.onscroll=function
不是说vue.js不能这样写，只是这样写不好这些必须在这个页面销毁时清除这个事件不然的话就会在全局监听，用原生window监听可能是大家最熟悉的方法。
可vue.js给我提供了@scroll这个方法用来处理滚动条监听它不香吗???
好了不多BB直接将上干货
使用@scroll的几个必要条件@scroll必须绑定在你要监听的盒子上且盒子必须写高度，请注意了是必须写高度若是想监听移动端满屏建议高度直接写100Vh让后在css样式上必须加上overflow:scroll;
这个是重点再说一遍是必须加上overflow:scroll;
大家可以看到我监听的是box1这个外出大盒子
下面是box1这个盒子的样式前面也说到了overflow:scroll;
和高度是必须加的必然没效果这里小编踩过很多坑特别是样式的问题不然我也不会这么啰嗦
说完了html和css的问题 接下来就说@scroll这么怎么用吧 其实和@click以用 都是在后面接上一个方法
例如：
@scroll="handleScroll(event ) "
看到这里大家是不是感觉很熟悉了你要是问我为啥你就回去好好看看js吧看到了event 要是还不会 那就…
想不起来也没关系 小编帮你回忆 在你绑定的函数必须传一个实参
event不然你拿不到事件对象我这里绑定的函数是handleScroll函数里面定义的形参是e(接收传过来的实参event)
既然拿到事件对象e了 你是不是就会了勒
我这里就写一个小的案例吧 也是用的最多的监听滚动条是否到底
这是绑定函数代码片段可以看到监听是否到底就是一个if的事e.srcElement.scrollTop + e.srcElement.offsetHeight >= e.srcElement.scrollHeight
解释一下：
这个if 顶部距离+当前滚动的高度>=滚动条的总高度这里一定不能写 = 临界值是很难触发的一定不要给自己挖坑
没办法 条件有限 只能截代码片段
但是我想这些片段应该也足够你入门@scroll事件了
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Vue.js前端框架之事件处理小结,本文给大家介绍了v-on 指令的基本用法，通过实例讲解的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-04-04
这篇文章主要介绍了Vue 图片压缩并上传至服务器功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2020-01-01
这篇文章主要介绍了Vue实现点击箭头上下移动效果，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-06-06
vue style width a href动态拼接问题的解决
这篇文章主要介绍了vue style width a href动态拼接问题的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
这篇文章主要介绍了vue父组件调用子组件方法报错问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要介绍了vite+vue3项目中svg图标组件封装的过程,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2024-03-03
Element中el-select下拉框实现选中图标并回显图标
本文主要介绍了Element中el-select下拉框实现选中图标并回显图标，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-12-12
表格常用功能经常有字段筛选、更多字段筛选弹框来过滤出我们所需要的数据,下面这篇文章主要给大家介绍了关于Vue中进行数据筛选与搜索功能实现常用的方法,文中通过代码介绍的非常详细,需要的朋友可以参考下2023-12-12
vue3.x 的shallowReactive 与 shallowRef 使用场景分析
在Vue3.x中,`shallowReactive`和`shallowRef`是用于创建浅层响应式数据的API,它们与`reactive`和`ref`类似,本文介绍vue3.x shallowReactive 与 shallowRef的使用场景,感兴趣的朋友一起看看吧2025-02-02
本篇文章主要介绍了VueJS如何引入css或者less文件的一些坑，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-04-04
最新评论