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 这个外出大盒子 vue @scroll 监听滚动条事件_第1张图片
下面是box1这个盒子的样式 前面也说到了 overflow: scroll; 和高度是必须加的必然没效果 这里小编踩过很多坑 特别是样式的问题 不然我也不会这么啰嗦
vue @scroll 监听滚动条事件_第2张图片
说完了 html 和css 的问题 接下来就说@scroll这么怎么用吧 其实和 @click 以用 都是在后面接上一个方法 例如 @scroll="handleScroll( e v e n t ) " 看 到 这 里 大 家 是 不 是 感 觉 很 熟 悉 了 你 要 是 问 我 为 啥 你 就 回 去 好 好 看 看 j s 吧 看 到 了 event)" 看到这里大家是不是感觉很熟悉了 你要是问我为啥 你就回去好好看看js吧 看到了 event)"jsevent 要是还不会 那就… 想不起来也没关系 小编帮你回忆 在你绑定的函数必须传一个实参 e v e n t 不 然 你 拿 不 到 事 件 对 象 我 这 里 绑 定 的 函 数 是 h a n d l e S c r o l l 函 数 里 面 定 义 的 形 参 是 e ( 接 收 传 过 来 的 实 参 event 不然你拿不到事件对象 我这里绑定的函数是handleScroll 函数里面定义的形参是e(接收传过来的实参 eventhandleScrolle(event)
既然拿到事件对象 e 了 你是不是就会了勒
我这里就写一个小的案例吧 也是用的最多的监听滚动条是否到底

这是绑定函数代码片段可以看到监听是否到底就是一个if的事e.srcElement.scrollTop + e.srcElement.offsetHeight >= e.srcElement.scrollHeight 解释一下这个if 顶部距离+当前滚动的高度>=滚动条的总高度这里一定不能写 = 临界值是很难触发的一定不要给自己挖坑.,vue @scroll 监听滚动条事件_第3张图片
没办法条件有限只能截代码片段 但是我想这些片段应该也足够你入门@scroll事件了
欢迎评论区指教

你可能感兴趣的:(vue @scroll 监听滚动条事件)