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 ...
随机推荐
- ImageMagick、imagick和ghostscript三者的关联
http://467754239.blog.51cto.com/4878013/1602518/ 一.功能概述 ImageMagick是第三方的图片处理软件,功能要比GD强大.建议两者都安装,并不冲突 ...
- iOS(UIWebView 和WKWebView)OC与JS交互 之二
在iOS应用的开发过程中,我们经常会使用到WebView,当我们对WebView进行操作的时候,有时会需要进行源生的操作.那么我记下来就与大家分享一下OC与JS交互. 首先先说第一种方法,并没有牵扯O ...
- 如何用Baas快速在腾讯云上开发小程序-系列1:搭建API & WEB WebSocket 服务器
版权声明:本文由贺嘉 原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/221059001487422606 来源:腾云阁 h ...
- 使用Java提供的MXBean来监控jvm创建了哪些线程
MBean是一种JavaBean,MBean往往代表的是JMX中的一种可以被管理的资源.MBean会通过接口定义,给出这些资源的一些特定操作: 属性的读和写操作 可以被执行的操作 关于自己的描述信息 ...
- 实用方法 - 解决360Doc文章不能复制的问题(实现不登录直接复制)
问题: 有时搜索文章的时候看到一些有用的文字,或者在网上搜索一些文献资料,找到需要的部分后,通常都可以使用 Ctrl + C,或者右键复制下来.但有些网站,比如:360个人图书馆(360Doc)会强制 ...
- .NET Core类库项目中如何读取appsettings.json中的配置
这是一位朋友问我的问题,写篇随笔回答一下.有2种方法,一种叫丑陋的方法 —— IConfiguration ,一种叫优雅的方法 —— IOptions . 1)先看丑陋的方法 比如在 RedisCli ...
- debian配置java环境变量
操作如下 首先从Oracle上下载支持linux的java jdk,然后安装到你系统中, 然后到/home/xxxx/.bashrc文件中加入 # java JAVA_HOME=/xxx/xxxxx ...
- ArcEngine获取要素数据集的容差和分辨率
/// <summary> /// 根据数据集获取容差 /// </summary> /// <param name="dataset">< ...
- day 0314函数的进阶
1.空间:内置空间,全局空间,局部空间. 内置空间:空间存放python解释器,为我们提供了方便的名字:input,print,str,list,tuple 三个空间的加载顺序: 内置空间>&g ...
- [skill][gdb][coredump][abrt] 使用abrt管理程序coredump
abrt:Automatic bug detection and reporting tool https://github.com/abrt/abrt 常用的命令: abrt-auto-report ...