vue3中 window绑定scroll事件滚动页面获取不到e.target.scrollTop

遇到的问题

vue3项目

onMounted(() => {window.addEventListener('scroll', (e) => {console.log(e.target.scrollTop)})
})

在这里插入图片描述

想要监听页面中的滚动,然后获取滚动距离实现一些功能,发现event参数中获取不到e.target.scrollTop(印象中以前使用这个获取的),发现e.target中根本没有scrollTop这个参数

解决:

因为window对象target的属性上是没有scrollTop(这个e.target.scrollTop应该是在特定元素中获取到的,没有测试,我也忘了)
window.scrollY || document.documentElement.scrollTop;

onMounted(() => {window.addEventListener('scroll', (e) => {const scrollTop = window.scrollY || document.documentElement.scrollTop;console.log(scrollTop)})
})

记录一下

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/22972.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

React项目目录结构与组件基础结构

在React中开发项目并扩展组件时,一个清晰合理的目录结构是至关重要的。它不仅可以帮助你更好地组织代码,还能提高项目的可维护性和扩展性。下面是一个基本的React项目目录结构大纲,你可以根据自己的项目需求进行调整: my-app/ ├…

面试被问准备多久要孩子?这样回答

听说有人面试被问到多久要孩子的问题,当时觉得很尴尬,不知如何回答,怕回答的不好不被录用,其实你可以这样回答,让面试官心满意足。 A 面试官:结婚了吗? 我:结婚了 面试官&#xff1…

Vuforia AR篇(六)— Mid Air 半空识别

目录 前言一、什么是Mid Air?二、使用步骤三、示例代码四、效果 前言 增强现实(AR)技术正在改变我们与数字世界的互动方式。Vuforia作为先进的AR开发平台,提供了多种工具来创造引人入胜的AR体验。其中,Mid Air功能以其…

俄罗斯人有哪些常用的口头禅,柯桥零基础俄语培训

Хватит! 够了! -Хватит, не стоит больше шуметь! 够了, 不要再吵了! -Это тебя не касается! 这与你无关! Блин! 靠! Блин这个词绝对是俄罗斯人最爱用的口语表达之一,…

右键Open with VSCode打开Vue3项目

之前看到一些同事能够对项目根目录进行右键打开项目到 Microsoft VS Code ,当时觉得挺不错的,于是乎今天自己折腾了一遍。 目录 1、创建vue3项目 2、更改注册表 # 打开注册表编辑器(Registry Editor) # 导航到以下注册表路径 …

前端_防抖节流

目录 一、防抖(debounce) 1.使用场景 2.js代码实现 3.lodash工具库使用 二、节流(throttle) 1.使用场景 2.js代码实现 3.lodash工具库使用 前端做项目,为了防止用户因为网络不好数据响应慢,导致进行…

信不信,马上教会你Purple Pi OH开发板之ADB常用命令

开源鸿蒙硬件方案领跑者 触觉智能 本文适用于在Purple Pi OH开发板进行分区镜像烧录。触觉智能的Purple Pi OH鸿蒙开源主板,是华为Laval官方社区主荐的一款鸿蒙开发主板。 该主板主要针对学生党,极客,工程师,极大降低了开源鸿蒙开…

C#-Switch判断分支语句

Switch判断分支语句 作用 : 让顺序执行的代码 产生分支 判断变量和常量相同时 才会执行 用法: Switch后面的变量值与case后面的常量相同时,case内的代码才会执行,如果都不满足则执行default内的代码 break的作用: 跳出 不会再执行判断 …

SQL学习小记(五)解决python连接Oracle数据库出现的问题

python运行时出现错误DPI-1047: Cannot locate a 64-bit Oracle Client library: “The specified module could not be 解决python连接Oracle数据库出现的问题 1. 配置本地Oracle的path2. python10的详细安装过程2.1. python10下载2.2. python10安装2.3.额外操作 3. python 安…

纷享销客BI典型场景案例解析

本章以具体案例来说明纷享销客一体化BI智能分析平台为企业在实际使用过程中带来的价值。 1)场景一:销售经理想要在周会上关注各销售人员的客户及订单情况,并在每周一上午9点可以把上周的整体情况周期性的将报表推送给相关销售人员。 具体图表展示样式及…

BIO 探究二

接上文 BIO 初探究 文章目录 前言一、使用netty二、nio 客户端 与 bio 服务端,bio 服务端 与 nio 客户端总结# 未完待续 前言 提示:验证阻塞到底阻塞在什么地方 提示:以下是本篇文章正文内容,下面案例可供参考 一、使用netty 上…

当企业越来越难做,精益变革能带来什么改变?

随着技术的不断进步和消费者需求的日益多样化,传统的管理模式和生产方式已经难以适应时代的发展。越来越多的企业开始陷入困境,难以在激烈的市场竞争中立足。然而,正是在这样的背景下,精益变革应运而生,为企业带来了前…

使用html2canvas和jspdf导出pdf包含跨页以及页脚

首先要下载两个文件,一个为html2canvas.min.js,另一个是jspdf.umd.min.js这两个文件分别下载的地址我也附录上,都在官网git: html2canvas.min.js: https://html2canvas.hertzen.com/dist/html2canvas.min.js jspdf.umd.min.js: …

代码随想录算法训练营第一天| 704. 二分查找、27. 移除元素

一、704. 二分查找 题目链接:https://leetcode.cn/problems/binary-search/description/ 文章讲解:https://programmercarl.com/0704.%E4%BA%8C%E5%88%86%E6%9F%A5%E6%89%BE.html 视频讲解:https://www.bilibili.com/video/BV1fA4y1o715 1.…

前端实现大文件分片并行上传、断点续传、秒传(完整解析)

一、总体流程图 二、具体步骤 简单理解:前端先将文件切割多份,在进行上传,由后端进行切片合并操作。 具体逻辑: 1. 前端选中上传文件(如果是批量上传就把选中的文件存入选中文件列表数组中,后续在遍历上…

【Vue3-Element-Admin 动态路由】涉及到的配置

Vue3-Element-Admin 动态路由 涉及到的配置 0. Vue3-Element-Admin 项目地址1. router/index.ts2. Mock接口模拟数据3. store/permission4. api/menu5. plugins/permission 这篇文章讲的主要是 Vue3-Element-Admin 差不多内置的动态路由配置 (根据后端接口渲染) 先把开发环境&a…

纷享销客一体化BI智能分析平台介绍

纷享销客BI智能分析平台是一款自助式敏捷BI,无缝继承纷享销客PaaS平台的对象数据、对象关系、功能权限体系与数据权限体系,用户通过简单的拖拽点选即可实现灵活定义分析模型和可视化自助分析,零技术门槛快速上手,面向全员各类角色…

深度学习 --- stanford cs231 编程作业(assignment1,Q2: SVM分类器)

stanford cs231 编程作业之SVM分类器 写在最前面: 深度学习,或者是广义上的任何学习,都是“行千里路”胜过“读万卷书”的学识。这两天光是学了斯坦福cs231n的一些基础理论,越往后学越觉得没什么。但听的云里雾里的地方也越来越多…

【学习笔记】MySQL(Ⅰ)

MySQL(Ⅰ) 1、 介绍 1.1、概述 1.2、MySQL 的优缺点 1.4、关系型数据库模型2、 基础篇 —— SQL(结构化查询语言) 2.1、通用语法 2.2、SQL 语句的分类 2.3、DDL 语句 2.3.1 数据库结构相关的语法 2.3.2 数据表相关的语…

Java实现俄罗斯方块游戏源代码(启动即可玩)

这是一个用Java Swing实现的俄罗斯方块游戏,具有经典的游戏机制和图形界面。游戏中,玩家需要旋转和移动不断下落的方块,使其填满一行来消除该行并得分。 该项目适合学习Java GUI编程、游戏开发基础以及面向对象编程(OOP&#xff0…