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事件了

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

最新评论