vue监听滚动事件 实现某元素吸顶或者固定位置显示
https://blog.csdn.net/wang1006008051/article/details/78003974
1、监听滚动事件
利用VUE写一个在控制台打印当前的scrollTop,
首先,在mounted钩子中给window添加一个滚动滚动监听事件,
mounted () {
window.addEventListener('scroll', this.handleScroll)
},
然后在方法中,添加这个handleScroll方法
handleScroll () {
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
console.log(scrollTop)
},
vue监听滚动事件 实现某元素吸顶或者固定位置显示的更多相关文章
- vue监听滚动事件,实现滚动监听
在vue中实现滚动监听和原生js无太大差异,下面是一个简单的demo,可在控制台查看结果 <!DOCTYPE html> <html lang="en"> ...
- vue监听滚动事件-元素固定位置显示
1.监听滚动事件 用VUE写一个在控制台打印当前的scrollTop用来测试是否执行: mounted () { window.addEventListener('scroll', this.hand ...
- vue监听滚动事件
vue中监听滚动事件,然后对其进行事件处理,一般有:1. 滚动到顶部吸附: 2. 根据滚动的位置激活对应的tab键(锚链接tab键) 这两种方式的处理都是可通过监听scroll来实现 mounted( ...
- Vue 爬坑之路(七)—— 监听滚动事件 实现动态锚点
前几天做项目的时候,需要实现一个动态锚点的效果 如果是传统项目,这个效果就非常简单.但是放到 Vue 中,就有两大难题: 1. 在没有 jQuery 的 animate() 方法的情况下,如何实现平滑 ...
- VUE 实现监听滚动事件,实现数据懒加载
methods: { // 获取滚动条当前的位置 getScrollTop() { let scrollTop = 0 if (document.documentElement && ...
- vue2.0 添加监听滚动事件
export default { data () { return { isFixed: true } }, mounted () { window.addEventListener('scroll' ...
- vue 监听页面宽度变化 和 键盘事件
vue 监听页面窗口大小 export default { name: 'Full', components: { Header, Siderbar }, data () { return { scr ...
- Vue跨路由触发事件,Vue监听sessionStorage
近来,在做公司的聊天系统,引用的是极光的api.项目需求实时监听别人发过来的消息,进行渲染到页面,还有历史记录也要渲染,历史记录和实时聊天记录返回的结构体还不一样,看到需求的我欲哭无泪,首先登录是在首 ...
- [JS]笔记12之事件机制--事件冒泡和捕获--事件监听--阻止事件传播
-->事件冒泡和捕获-->事件监听-->阻止事件传播 一.事件冒泡和捕获 1.概念:当给子元素和父元素定义了相同的事件,比如都定义了onclick事件,点击子元素时,父元素的oncl ...
随机推荐
- [转]获取app的内部储存路径
首先内部存储路径为/data/data/youPackageName/,下面讲解的各路径都是基于你自己的应用的内部存储路径下.所有内部存储中保存的文件在用户卸载应用的时候会被删除. 一. files1 ...
- springCloud学习之服务注册和发现
leader让完一个简单的springcloud的demo,自己之前听说过springcloud微服务,但是没有重视.现在网上查各种资料,但是感觉不怎么样啊,还是不会,明天晚上把代码给他看,天啦,这个 ...
- day_5.27py
生成器:send() next() send 和next都可以把生成器向下走,但是send可以传入个参数 ''' 周末继续py 下周回学校过郭星辰生日,还得回来再复查一下 2018-5-27 16: ...
- VBS数组导入Excel
<script language="vbscript"> dim arr(9999,4) for i=0 to 9999 for j = 0 to 4 arr(i,j) ...
- PAT甲级1013-1014-1015
题目:1013 Battle Over Cities 思路:城市数也就1000, 对于每次询问暴力bfs一下看一下有多少连通块就行了.答案就是联通块数减一. #include<stdio.h&g ...
- NYOJ16|嵌套矩形|DP|DAG模型|记忆化搜索
矩形嵌套 时间限制:3000 ms | 内存限制:65535 KB 难度:4 描述 有n个矩形,每个矩形可以用a,b来描述,表示长和宽.矩形X(a,b)可以嵌套在矩形Y(c,d)中当且仅当a& ...
- 解决ubuntu系统“XXX is not in the sudoers file”错误
用adduser新建的用户,当时只输入了一个用户名,没做其它操作,这样就建立了一个normal用户.在执行sudo vim hadoop-env.sh时,报“*** is not in the sud ...
- Java中抽象类和抽象方法的区别
抽象方法:在类中没有方法体的方法,就是抽象方法. 抽象类:含有抽象方法的类就叫抽象类. 抽象类中的抽象方法必须被实现! 如果一个子类没有实现父类中的抽象方法,则子类也成为了一个抽象类! 抽象类中的普通 ...
- Flink – metrics V1.2
WebRuntimeMonitor .GET("/jobs/:jobid/vertices/:vertexid/metrics", handler(new JobVertexM ...
- shiro默认过滤器