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. js添加事件处理程序

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. EXCEL 2007施工进度横道图制作步骤及实战练习

    [知识讲解] 1.将图表中的部分图形“隐藏”起来 如果为了实现某种特殊的图表效果,需要将图表中的部分图形“隐藏”起来,除了将该系列删除外(有时候这种方法不能达到所需要的效果),还可以通过下面的方法来实 ...

  3. (ecj)Eclipse的Java编译器分析之一——ecj介绍

    Java是一个开放的平台,对于除发布编译器/解释器/基础类库之外,该语言的负责机构更多的是制定一系列标准,任何符合标准的厂商产品均可用于市场投放.甚至包括其编译器及解释器. (比如Hibernate提 ...

  4. day_11py学习

    ''' 字典增加和删除 1.添加 xxx[新的key] = value 2.删除 del xxx[key] 3.修改 xxx[已存在的key] = new_value 4.查询 xxx.get(key ...

  5. Shell----简单整理

    ------------------------------------------------------------------Shell脚本--------------------------- ...

  6. ASP.NET Core 2.0 Preview 1 中贴心的新特性

    西雅图时间5月10日,微软在 Build 2017 大会上发布了 ASP.NET Core 2.0 Preview 1 ( 详见 Announcing ASP.NET 2.0.0-Preview1 a ...

  7. 学习 rostopic

    rostopic pub可以把数据发布到当前某个正在广播的话题上. rostopic pub [topic] [msg_type] [args] 示例 $ rostopic pub - /turtle ...

  8. [No000017A]改善C#程序的建议3:在C#中选择正确的集合进行编码

    要选择正确的集合,我们首先要了解一些数据结构的知识.所谓数据结构,就是相互之间存在一种或多种特定关系的数据元素的集合.结合下图,我们看一下对集合的分类. 集合分类 在上图中,可以看到,集合总体上分为线 ...

  9. [No0000143]Win10“卓越性能模式”

    从不久之前Win10更新1803以来,微软不仅带来了一些新功能(和BUG),还悄悄地加入了一个“卓越性能模式”,老张想了想,不对呀,以前就有了一个“高性能模式”,这怎么就还多出个新的性能模式来,难道会 ...

  10. 若父设置了overflow: hidden;子如何不受影响

    若父设置了overflow: hidden;子如何不受影响 1.如图: 2.只需要给一个position: absolute;定位 3.相当于重新给页面进行定位,右侧便会有滚动条出现. 4.overf ...