vue项目页面 scrollTop ==0 的玄学问题_hongc93的博客-程序员秘密

技术标签: vue  前端  vue.js  jquery  javascript  

背景: 公司需求做个vue 跟随屏幕滚动导航目录 感觉很简单.

监听scroll事件然后取scrollTop值就可以吧但是

无论怎么方式

document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop

绑定事件

window.addEventListener('scroll', this.onScroll,true)

都没有效果,打印输出的scrolltop为0

求度娘显灵。。。

 mounted() {
    this.$nextTick(() => {
      this.$root.$el.addEventListener('scroll', this.onScroll, true);
    });
  },
  methods: {
    onScroll() {
      var scroll = document.querySelector('#app').scrollTop();
      console.log(scroll)
    },
  },

完美解决

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/hongc93/article/details/122478048

智能推荐

springboot和mongoDB分片配置 集群配置_spring boot mongodb切片_quliuwuyiz的博客-程序员秘密

最近在开发的过程中,遇到mongoDB与springboot集群过程中的集群及分片链接的配置,以及mongoDB通过后台的方式创建索引及联合索引,在网上搜了下没有具体的配置举例,在项目中遇到之后,就顺便记录下来,已被后用,在记录的过程中只是暂时用到的,其他的以后再补充吧。使用Mongo Shell连接实例 (请使用MongoDB 3.0以上版本的driver)mongo --host s-*.mo...

2018-10#技术团队高效开发工具_mulangren1988的博客-程序员秘密

技术团队高效开发工具团队中,开发工具不统一,遇到问题没有现成解决方案,需要花费额外的时间去处理。因此,有必要在组件团队的一开始,就统一开发工具。以下是很多国内乃至国外开发人员推荐比较多的工具,作为团队中核心基础。文章目录技术团队高效开发工具云笔记代码编辑器文本编辑器版本管理工具浏览器文件实时同步本地文件管理格式化JSON 格式化云笔记有道笔记官网印象笔记官网代码编辑器IDEA ...

MySQL - DISTINCT & GROUP BY 去重_mysql group by 去重_放羊的牧码的博客-程序员秘密

MySQL中常用去重复数据的方法是使用distinct 或者 group by ,以上2种均能实现,但2者也有不同的地方。DISTINCT 特点如:select distinct name, sex from tb_students 这个sql的语法中,查询tb_students 表中name, sex 并去除名字和性别都重复的学生。1、distinct 只能放在查询字段的最前面,不能放在查询字段的中间或者后面。备注:select sex, distinct name fro...

on 绑定 hover事件失效_onhover_d_haha的博客-程序员秘密

我的代码是下面这样$("#classgroup").on('hover','.Movegroup li',function(){ alert("选中"); });然后没有起作用,后来在网上查了,在JQuery中,hover()函数本身是对 mouseenter && mouseleave 的封装,然而在原生event中,并没有hover这一事件,所以在传递参数hover时...

树莓派与C++的开发之路(第二章-安装与环境配置------------第1节-运行第一个C++程序)_木穗的博客-程序员秘密

第一步 安装g++在命令窗口 sudo apt-get install g++知道弹出 确认安装?输入 y等待安装结束。第二步输入 ls 获取当前文件夹下 文件列表输入 mkdir+空格+文件夹名在当前目录下创建新建文件夹输入cd+空格+文件夹名进入到该文件夹内出入cd返回到上一级目录选择到想要创建CPP文件的目录输入ls 查...

Kotlin告别FindViewById的原理_快乐的编码小猪的博客-程序员秘密

引子使用Kotlin引用控件的时候,不用写findViewById,直接用id即可,比如<?xml version="1.0" encoding="utf-8"?><androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-au

随便推点

zabbix添加telnet监控_zabbix telent_机智的埃努的博客-程序员秘密

添加针对端口监听telnet的监控项应运营需求,添加程序端口的telnet监控。整体思路如下,1.收集当前ip及端口情况,形成test文件,后边会被ansible批量执行时调用2.将脚本2(monitor_listen_port.py)放到各机子下的/etc/zabbix/script/monitor_listen_port.py,并修改定时任务,这两项写到ansible-playbook中执行,...

如何检测晶振是否合格?_ay18991283724的博客-程序员秘密

本文我们主要讲述可了石英晶体振荡器的应用设备,以及对石英晶体振荡器进行检定时需要用到的设备及相关注意事项。石英晶体振荡器是利用石英晶体的压电效应制成,其通用说法就是我们平时提到的晶振,最常用的如温补晶振,恒温晶振等,不同类型的晶振,其技术指标有很大的差别。晶振广泛用于电子测量仪器,如我们经常接触到的SYN5301型时间检定仪,SYN5605型时间间隔测量仪,SYN5602型电子停车计时收费装置...

ByteTrack翻译与解读_WZZZ0725的博客-程序员秘密

这里写目录标题AbstactIntroduction论文地址:https://arxiv.org/abs/2110.06864代码地址:github.com/ifzhang/ByteTrackAbstact多目标跟踪 (MOT) 旨在视频中预测目标的bounding boxes和identities。大多数的方法通过关联一些得分高于阈值的检测框来得出identities,那些得分比较低的目标(比如被遮挡的物体),就被简单的过滤掉了,这样的话会造成一些真正的目标的丢失以及错误的预测轨迹。为了解决这个问

Android Activity界面切换动画_android activity.enter动画_小不懂0706的博客-程序员秘密

最近做项目,发现Activity界面切换跳转时,切换动画不一致,有的左进右退,有的右进左退,有的左进左退,有的右进右退,视觉交互效果不是很好,通过查资料,采用以下方法可以解决。主要是通过AppTheme,直接在主题中修改activity动画样式,具体如下:1.定义包含动画的Activity主题<!-- Base application theme. --> &lt...

HTML接收前一个页面的传值并将他传递个下一个页面不发生跳转_主页面跳去子页面在跳回来没有传值主页的值会变吗_a967333的博客-程序员秘密

最近公司要做BPM流程管理,用到了Ultimus,然后在审批页面要嵌入流程图和审批记录步骤页面,而这两个页面需要传相关参数,这个参数则是前一个页面传过来的。这个问题开始困扰着我,HTML传来传去,后来发现这个问题原来如此简单。。 <li class="nav_li">审批记录</li> <li class="nav_content" style="display:none;"

jetty_Jetty,Java和OAuth入门_cunfen0516的博客-程序员秘密

jetty使用Okta的身份管理平台轻松部署您的应用程序使用Okta的API在几分钟之内即可对任何应用程序中的用户进行身份验证,管理和保护。 今天尝试Okta。 Jetty是一个小型,高度可扩展的基于Java的Web服务器和servlet引擎。 它支持HTTP / 2,WebSockets和许多其他协议。 它为大型和小型网站和框架(例如Google AppEngine)提供支持。 因为它是一个...

推荐文章

热门文章

相关标签