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监听滚动事件 实现某元素吸顶或者固定位置显示的更多相关文章

  1. vue监听滚动事件,实现滚动监听

    在vue中实现滚动监听和原生js无太大差异,下面是一个简单的demo,可在控制台查看结果 <!DOCTYPE html> <html lang="en"> ...

  2. vue监听滚动事件-元素固定位置显示

    1.监听滚动事件 用VUE写一个在控制台打印当前的scrollTop用来测试是否执行: mounted () { window.addEventListener('scroll', this.hand ...

  3. vue监听滚动事件

    vue中监听滚动事件,然后对其进行事件处理,一般有:1. 滚动到顶部吸附: 2. 根据滚动的位置激活对应的tab键(锚链接tab键) 这两种方式的处理都是可通过监听scroll来实现 mounted( ...

  4. Vue 爬坑之路(七)—— 监听滚动事件 实现动态锚点

    前几天做项目的时候,需要实现一个动态锚点的效果 如果是传统项目,这个效果就非常简单.但是放到 Vue 中,就有两大难题: 1. 在没有 jQuery 的 animate() 方法的情况下,如何实现平滑 ...

  5. VUE 实现监听滚动事件,实现数据懒加载

    methods: { // 获取滚动条当前的位置 getScrollTop() { let scrollTop = 0 if (document.documentElement && ...

  6. vue2.0 添加监听滚动事件

    export default { data () { return { isFixed: true } }, mounted () { window.addEventListener('scroll' ...

  7. vue 监听页面宽度变化 和 键盘事件

    vue 监听页面窗口大小 export default { name: 'Full', components: { Header, Siderbar }, data () { return { scr ...

  8. Vue跨路由触发事件,Vue监听sessionStorage

    近来,在做公司的聊天系统,引用的是极光的api.项目需求实时监听别人发过来的消息,进行渲染到页面,还有历史记录也要渲染,历史记录和实时聊天记录返回的结构体还不一样,看到需求的我欲哭无泪,首先登录是在首 ...

  9. [JS]笔记12之事件机制--事件冒泡和捕获--事件监听--阻止事件传播

    -->事件冒泡和捕获-->事件监听-->阻止事件传播 一.事件冒泡和捕获 1.概念:当给子元素和父元素定义了相同的事件,比如都定义了onclick事件,点击子元素时,父元素的oncl ...

随机推荐

  1. 修改web前端访问端口

    说明: URL规则可添加变量部分,也就是说将符合同种规则的URL抽象成一个URL模式 1 2 3 @app.route('/instance/<uuid>/') def instance( ...

  2. Ubuntu14.04下安装redis-3.2.0以及开机自启动

    去官网下载Redis-3.2.0.tar.gz,将redis-3.2.0.tar.gz放入/opt目录下 解压redis-3.2.0.tar.gz xiaoyao@xiaoyao-virtual-ma ...

  3. spark未授权RCE漏洞学习

    Spark简介 spark是一个实现快速通用的集群计算平台.它是由加州大学伯克利分校AMP实验室 开发的通用内存并行计算框架,用来构建大型的.低延迟的数据分析应用程序.它扩展了广泛使用的MapRedu ...

  4. 5.STM32通用定时器TIM3中断

    1.通用定时器TIM3中断 #include "timer.h" #include "led.h" void TIM3_Int_Init(u16 arr,u16 ...

  5. vins-mono代码分析

    vins-mono的关键帧选择策略 1 与前一帧的平均视差.如果跟踪特征的平均视差超过某个阈值,我们会将此图像视为关键帧. 2 另一个是跟踪质量.如果跟踪特征的数量低于一个阈值,我们把这一帧看做一个新 ...

  6. mapReducer第一个例子WordCount

    mapreducer第一个例子,主要是统计一个目录下各个文件中各个单词出现的次数. mapper package com.mapreduce.wordCount; import java.io.IOE ...

  7. hung_task_timeout_secs和blocked for more than 120 seconds的解决方法

    Linux系统出现hung_task_timeout_secs和blocked for more than 120 seconds的解决方法 Linux系统出现系统没有响应. 在/var/log/me ...

  8. 2017年蓝桥杯省赛A组c++第1题(走迷宫)

    /* 标题:迷宫 X星球的一处迷宫游乐场建在某个小山坡上. 它是由10x10相互连通的小房间组成的. 房间的地板上写着一个很大的字母. 我们假设玩家是面朝上坡的方向站立,则: L表示走到左边的房间, ...

  9. innodb表锁情况

    MySQL InnoDB默认行级锁.行级锁都是基于索引的 行级锁变为表级锁情况如下: 1.如果一条SQL语句用不到索引是不会使用行级锁的,会使用表级锁把整张表锁住. 2.表字段进行变更. 3.进行整表 ...

  10. day2_jmeter断言

    断言就是:检查返回结果,测试是否通过,就是自动帮你校验结果用的 1)添加响应断言 我们模式匹配规格选择包括