监听滚动条事件
时间:2019-11-26
本文章向大家介绍监听滚动条事件,主要包括监听滚动条事件使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
今天遇到需要监听滚动条事件的问题,本来以为是一个简单的监听就好了,哪成想,这么多bug,说到底还是自己基础不扎实,所以趁现在下班没事把它记录下来。以备后续所需,哈哈。
(1)首先是最基本的监听事件
methods: { handleScroll() { const top = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; //兼容不同的浏览器 console.log(top); if (top > 100) { // console.log("大于"); } } }, mounted() { window.addEventListener("scroll", this.handleScroll); //监听滚动事件 }
(2)但是!他就是不出来呢,一开始咱也不知道啊,后来又是百度又是查资料的,说是监听时需要三个参数于是》》》
mounted() { window.addEventListener("scroll", this.handleScroll, true); } //后面的 true 则是第三个参数
然后就可以出来了(下图便是)
(3)然后!重点来了,因为做的是手机端吗,为了他的滚动流畅度,于是就给页面最大的容器加了“overflow: scroll” ,咦~ 又不出来了,这个愁毁我了,然后又是一通找资料,于是就解决了,哈哈
methods: { handleScroll(e) { const top = e.target.scrollTop; if (top > 100) { this.flag = false; } else { this.flag = true; } } }, mounted() { window.addEventListener("scroll", this.handleScroll, true); }, destroyed() { window.removeEventListener("scroll", this.windowScroll, true); } //关闭页面时需要移除监听事件
至于,为什么这么写,我的想法是,因为这个是在单独的一个组件中,所以没有办法获取滚动条,但是当他的根元素e 传给他之后,就用e 来代替喽。我也不知道这么理解对不对,希望各位大佬,可以帮忙给解释一下。谢谢!!!
原文地址:https://www.cnblogs.com/qinyuanchun/p/11938668.html
- 数据抓取与利用行为的不正当竞争法规制
- python学习手册-爬爬那些年咱没见过的校花图片
- 正则表达式游戏的答案
- .NET Core的日志[2]:将日志输出到控制台
- 2017年高等教育十大战略性技术(二)
- 通过实例模拟ASP.NET MVC的Model绑定机制:数组
- 《全球贸易信息动态》
- .NET Core的日志[3]:将日志写入Debug窗口
- Code2Cloud:比ALM中断更大
- .NET Core的日志[4]:将日志写入EventLog
- 微信小程序不行了?看小马哥带你忆童年
- ASP.NET MVC三个重要的描述对象:ControllerDescriptor和ActionDescriptor的创建
- .NET Core的日志[5]:利用TraceSource写日志
- 物联网芯片正在积极开发 明年将得到爆发
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 学习git这一篇就够了!!!
- 如何在nodejs中实现兄弟进程通信
- Python异常处理
- Python装饰器实现函数动态类型检查
- 如何自动填充SQL语句中的公共字段
- 面试官喜欢问的Java编译期与运行期问题总结全了
- 面试5年25K程序员回答不出来为什么Java的main方法必须是public static void?
- Python装饰器
- 3分钟短文:十年窖藏,Laravel告诉你表单验证的“正确姿势”
- 面试官:说说SpringBoot中Spring容器的启动过程
- Python IO
- Python解析式
- 面试官:Tomcat 的调优怎么做?你的最佳实践有哪些?
- Tomcat源码分析
- lazy-mock ,一个生成后端模拟数据的懒人工具