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)" 看到这里大家是不是感觉很熟悉了 你要是问我为啥 你就回去好好看看js吧 看到了event)"看到这里大家是不是感觉很熟悉了你要是问我为啥你就回去好好看看js吧看到了event 要是还不会 那就… 想不起来也没关系 小编帮你回忆 在你绑定的函数必须传一个实参 event不然你拿不到事件对象我这里绑定的函数是handleScroll函数里面定义的形参是e(接收传过来的实参event 不然你拿不到事件对象 我这里绑定的函数是handleScroll 函数里面定义的形参是e(接收传过来的实参event不然你拿不到事件对象我这里绑定的函数是handleScroll函数里面定义的形参是e(接收传过来的实参event)
既然拿到事件对象 e 了 你是不是就会了勒
我这里就写一个小的案例吧 也是用的最多的监听滚动条是否到底
这是绑定函数代码片段可以看到监听是否到底就是一个if的事e.srcElement.scrollTop + e.srcElement.offsetHeight >= e.srcElement.scrollHeight 解释一下这个if 顶部距离+当前滚动的高度>=滚动条的总高度这里一定不能写 = 临界值是很难触发的一定不要给自己挖坑.,
没办法条件有限只能截代码片段 但是我想这些片段应该也足够你入门@scroll事件了
欢迎评论区指教
