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. zeromq使用模式实验总结

    zeromq:官网 安装  demo及各语言绑定 golang绑定 实验环境:win10 x64/centos6 x86 zeromq4.0.6 zmq三种模式:push/pull.pub/sub.r ...

  2. 解决Error:All flavors must now belong to a named flavor dimension. Learn more at https://d.android.com

    主app的build.gradle里面的 defaultConfig { targetSdkVersion:*** minSdkVersion :*** versionCode:*** version ...

  3. DDoS(Distributed Denial of Service,分布式拒绝服务)

    DDoS:Distributed Denial of Service,即分布式拒绝服务攻击. 借助于客户/服务器技术,将多个计算机联合起来作为攻击平台,对一个或多个目标发动DDoS攻击,从而成倍地提高 ...

  4. js函数 eql,equal,equalp

    function eql(obj, other) { if(stringp(obj) && stringp(other) && obj === other) retur ...

  5. Spark RDD Action 简单用例(一)

    collectAsMap(): Map[K, V] 返回key-value对,key是唯一的,如果rdd元素中同一个key对应多个value,则只会保留一个./** * Return the key- ...

  6. bootstrapValidator多字段联合验证(如开始日期和结束日期中,开始日期不可晚于结束日期)

    接触bootstrapvalidator时间不久,最近需要多个字段共同验证,网上查了一下未找到,查阅api文档,发现确实可以实现. 先看dom <div class="form-gro ...

  7. GIAC深圳站 | 2018年不可错过的全球互联网架构大会!

    2018年6月1~2日,GIAC 全球互联网架构大会将于深圳华侨城洲际酒店举行!GIAC全球互联网架构大会是由msup和高可用架构技术社区联合举办的面向架构师.技术负责人及高端技术从业人员的技术架构大 ...

  8. nowcoder 211B - 列队 - [(伪·良心贪心)真·毒瘤暴力]

    题目链接:https://www.nowcoder.com/acm/contest/211/B 题目描述 炎热的早上,gal男神们被迫再操场上列队,gal男神们本来想排列成x∗x的正方形,可是因为操场 ...

  9. POJ 2027 - No Brainer

    Description Zombies love to eat brains. Yum. Input The first line contains a single integer n indica ...

  10. Docker容器与容器云之Docker单机集群部署案例

    准备工作: CentOS 7安装docker: #yum -y install docker 1.获取节点所需镜像 --主机执行 #docker pull django #docker pull ha ...