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事件了
欢迎评论区指教

vue @scroll 监听滚动条事件相关推荐

Vue全局监听滚动条事件
项目需求滚动条大于200时候,头部固定定位,小于的时候相对定位,监听滚动条事件: // 全局监听,写在App.vue里面methods: {handleScroll(){let scrollTop = ...
Vue监听滚动条事件点击回到顶部
Vue监听滚动条事件点击回到顶部监听滚顶条事件: created () {this.listenerFunction(); }, beforeDestroy () {document.remove ...
html页面滚动条监听事件,jquery如何监听滚动条事件？
jquery如何监听滚动条事件?下面本篇文章给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 问题: 在浏览很多网页中都会发现,当滚动条滚动到一定的位置的时候就出显示一 ...
html监听页面滚动高度,jquery如何监听滚动条事件？
jquery如何监听滚动条事件?下面本篇文章给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 问题: 在浏览很多网页中都会发现,当滚动条滚动到一定的位置的时候就出显示一 ...
JS 监听滚动条事件
JS 监听滚动条事件获取滚动条位置代码监听滚动条方法效果获取滚动条位置代码 /** * 获取滚动条位置 */ function getScrollTop() {var scrollPos;if ...
vue:监听滚动条事件
由于某些原因,我不得不手工用ant design vue的a-row和a-col拼凑了一个表格,好不容易添加了水平滚动条,然后发现只要拖动滚动条,左表头未设置右边框的问题就被暴露了(为什么没有设置右边 ...
监听滚动条事件来实现导航栏吸顶效果
首先要实现监听滚动条的位置: (1)在mounted钩子函数中随便定义一个方法来获取滚动条变化: window.addEventListener('scroll', this.handleScroll ...
react hooks 记录监听滚动条事件踩得坑
今天写项目时需要获取滚动条距离顶部和左部距离踩了一些坑话不多说直接上代码 const scrollChange = () => {// 监听滚动条距离顶部距离console.log(doc ...
vue之监听DOM事件
在vue中也有监听DOM事件,比如这样一个场景,我们输完一个名字之后点击一个按钮获取一个花名,或者牛X的名字代码如下: 代码中:@click可写成v-on:click,不同的写法. 页面效果如下执行 ...

vue @scroll 监听滚动条事件

vue @scroll 监听滚动条事件

vue @scroll 监听滚动条事件相关推荐

最新文章

热门文章