JavaScript | 检测文档在垂直方向已滚动的像素值用pageYOffset在webstorm上显示弃用了,是否应该继续使用?还是用其他替代?

在学习JavaScript的时候,深入学习时会遇到一些实际案例需要检测文档在垂直方向已滚动的像素值。

例如,当前页面内容很多,我想要滚动鼠标滑轮或者拖拽滚动条来浏览网页下面的内容。这时候一动滚动条,一些绝对固定的盒子却想要随着网页内容的滚动,需要重新定位在页面中的某一位置,这时若想要通过js来实现定位的辅助,那么就必须要使用能检测文档在垂直方向已滚动的像素值的函数来实现。

应该有部分人在学习JavaScript这部分的时候是被教使用

pageYOffset

首先这个函数没问题,不但ie9以上可以用,ie9以下也可以用,其实直接用它也没问题

就是这个函数在webstorm里就显示已经被官方弃用了

虽然显示被弃用,但是功能还是依旧正常的

那么如果是想用别的函数来替代这个pageYOffset函数,官方也给出了新函数

scrollY

Window.scrollY【官方文档】

本质上来说pageYOffset 属性是 scrollY 属性的别名

window.pageYOffset == window.scrollY; // 总是返回 true

测试代码(片段):

<script>window.addEventListener('scroll', function () {console.log(window.pageYOffset);console.log('-----------------');console.log(window.scrollY);console.log('==================');})
</script>

可以看到他俩是完全一样的结果

为了跨浏览器兼容,请使用 window.pageYOffset 代替 window.scrollY。另外,旧版本 IE(<9)两个属性都不支持,必须使用其他的非标准属性。完整的兼容性代码如下:

var supportPageOffset = window.pageXOffset !== undefined;
var isCSS1Compat = (document.compatMode || "") === "CSS1Compat";var x = supportPageOffset? window.pageXOffset: isCSS1Compat? document.documentElement.scrollLeft: document.body.scrollLeft;
var y = supportPageOffset? window.pageYOffset: isCSS1Compat? document.documentElement.scrollTop: document.body.scrollTop;

 

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

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

相关文章

python图形化编程turtle小乌龟

文章目录&#xff1a; 一&#xff1a;导入包&#xff08;常用的&#xff09; 二&#xff1a;布局 1.设置世界坐标系 2.窗体 3.画布屏幕screen 三&#xff1a;线条画笔海龟 1.运动 2.样式 3.外观 4.其他 四&#xff1a;颜色 五&#xff1a;文字 六&#xff1a;图…

【Kubernetes】k8s删除master节点后重新加入集群

目录 前言一、思路二、实战1.安装etcdctl指令2.重置旧节点的k8s3.旧节点的的 etcd 从 etcd 集群删除4.在 master03 上&#xff0c;创建存放证书目录5.把其他控制节点的证书拷贝到 master01 上6.把 master03 加入到集群7.验证 master03 是否加入到 k8s 集群&#xff0c;检查业务…

Unity触发器的使用

1.首先建立两个静态精灵&#xff08;并给其中一个物体添加"jj"标签&#xff09; 2.添加触发器 3.给其中一个物体添加刚体组件&#xff08;如果这里是静态的碰撞的时候将不会触发效果&#xff0c;如果另一个物体有刚体可以将它移除&#xff0c;或者将它的刚体属性设置…

c++pair的用法

pair简单来说就是可以存储两种类型数据的一个类&#xff0c;其内部是使用模板实现的&#xff0c;所以可以指定其内部的类型。 pair在#include <utility> pair的构造 pair<int, string> p1({ 1,"张三" });pair<int, string> p2;pair<int, str…

文件的基础

一、文件 什么是文件 文件流&#xff1a; 一、1、文件的相关操作 创建文件的三种方式&#xff1a; public class FileCreate {public static void main(String[] args) {}//方式1 new File(String pathname)Testpublic void create01() {String filePath "e:\\news1.…

Qt源码分析: QEventLoop实现原理

QEventLoop屏蔽了底层消息循环实现细节&#xff0c;向上提供了与平台无关的消息/事件循环。 本文拟对Windows系统下QEventLoop的实现原理予以分析。 注1&#xff1a;限于研究水平&#xff0c;分析难免不当&#xff0c;欢迎批评指正。 注2&#xff1a;文章内容会不定期更新。 …

C语言-memcpy(不重复地址拷贝 模拟实现)

memcpy&#xff08;不重复地址拷贝&#xff09; 语法格式 在C语言中&#xff0c;memcpy 是一个标准库函数&#xff0c;用于在内存之间复制数据。它的原型定义在 <string.h> 头文件中。memcpy 的语法格式如下&#xff1a; c void *memcpy(void *destination, const voi…

健身·健康行业Web3新尝试:MATCHI

随着区块链技术进入主流&#xff0c;web3 运动已经开始彻底改变互联网&#xff0c;改写从游戏到金融再到艺术的行业规则。现在&#xff0c;MATCHI的使命是颠覆健身行业。 MATCHI是全球首个基于Web3的在线舞蹈健身游戏和全球首个Web3舞蹈游戏的发起者&#xff0c;注册于新加坡&a…

K8s 集群高可用master节点ETCD挂掉如何恢复?

写在前面 很常见的集群运维场景&#xff0c;整理分享博文内容为 K8s 集群高可用 master 节点故障如何恢复的过程理解不足小伙伴帮忙指正 不必太纠结于当下&#xff0c;也不必太忧虑未来&#xff0c;当你经历过一些事情的时候&#xff0c;眼前的风景已经和从前不一样了。——村上…

【JVM】(内存区域划分 为什么要划分 具体如何分 类加载机制 类加载基本流程 双亲委派模型 类加载器 垃圾回收机制(GC))

文章目录 内存区域划分为什么要划分具体如何分 类加载机制类加载基本流程双亲委派模型类加载器 垃圾回收机制&#xff08;GC&#xff09; 内存区域划分 为什么要划分 JVM启动的时候会申请到一整个很大的内存区域,JVM是一个应用程序,要从操作系统这里申请内存,JVM就需要根据,把…

【Leetcode-73.矩阵置零】

题目&#xff1a; 给定一个 m x n 的矩阵&#xff0c;如果一个元素为 0 &#xff0c;则将其所在行和列的所有元素都设为 0 。请使用 原地 算法。 示例 1&#xff1a; 输入&#xff1a;matrix [[1,1,1],[1,0,1],[1,1,1]] 输出&#xff1a;[[1,0,1],[0,0,0],[1,0,1]]示例 2&…

如何写好Stable Diffusion的prompt

Stable Diffusion是一种强大的文本到图像生成模型&#xff0c;其效果在很大程度上取决于输入的提示词&#xff08;Prompt&#xff09;。以下是一些关于如何编写有效的Stable Diffusion Prompt的秘诀&#xff1a; 明确描述&#xff1a;尽量清晰地描述你想要的图像内容。使用具体…

Mysql8和Mysql5加锁规则的细微不同

前言 验证版本 分别为Mysql5.7.22和Mysql8.0.26 关于Mysql5.7.22的加锁规则请查看 MySQL行锁加锁规则之等值查询 和 MySQL行锁加锁规则之范围查询 两个版本的等值查询规则一样&#xff0c;区别在于范围查询的“向右匹配到第一个不符合记录” 的加锁规则&#xff0c;Mysql5.…

2024全新返佣商城分销商城理财商城系统源码 全开源PHP+VUE源码

2023全新返佣商城分销商城理财商城系统源码 全开源PHPVUE源码 程序安装环境要求&#xff1a; nginx1.16 php7.2 mysql5.6 程序全开源PHPVUE源码 有需要测试的老铁&#xff0c;拿去测试吧

Linux_基础指令(一)

目录 1、ls指令 1.1 ls -l 1.2 ls -a 1.3 ls -i 2、pwd指令 3、cd指令 3.1 路径的概念 3.1.1 绝对路径 3.1.2 相对路径 3.2 cd ~ 3.3 cd - 4、touch指令 5、mkdir指令 6、删除系列的指指令 6.1 rmdir 6.2 rm 7、man指令 8、cp指令 9、move指令 结…

【Java】十大排序

目录 冒泡排序 选择排序 插入排序 希尔排序 归并排序 快速排序 堆排序 计数排序 桶排序 基数排序 冒泡排序 冒泡排序(Bubble Sort)是一种简单的排序算法。它重复地遍历要排序的序列&#xff0c;依次比较两个元素&#xff0c;如果它们的顺序错误就把它们交换过来。遍历…

论文阅读_参数微调_P-tuning_v2

1 P-Tuning PLAINTEXT 1 2 3 4 5 6 7英文名称: GPT Understands, Too 中文名称: GPT也懂 链接: https://arxiv.org/abs/2103.10385 作者: Xiao Liu, Yanan Zheng, Zhengxiao Du, Ming Ding, Yujie Qian, Zhilin Yang, Jie Tang 机构: 清华大学, 麻省理工学院 日期: 2021-03-18…

cache的58问,您能回答上几个

快速链接: . &#x1f449;&#x1f449;&#x1f449; 个人博客笔记导读目录(全部) &#x1f448;&#x1f448;&#x1f448; 付费专栏-付费课程 【购买须知】: 【精选】ARMv8/ARMv9架构入门到精通-[目录] &#x1f448;&#x1f448;&#x1f448;联系方式-加入交流群 ---…

东京旅行攻略:机票、交通、消费和看富士山

欢迎关注「苏南下」 在这里分享我的旅行和影像创作心得 分享一些最近从香港去日本东京的短期周末旅行体验。 1&#xff1a;香港飞东京需要4小时&#xff0c;非旺季往返的价格在2000元左右。去年五一假期&#xff0c;我提前了两个多月买的香港快运就是这个价&#xff0c;不算贵。…

微信小程序的页面制作---常用组件及其属性

微信小程序里的组件就是html里的标签&#xff0c;但其组件都自带UI风格和特定的功能效果 一、常用组件 view&#xff08;视图容器&#xff09;、text&#xff08;文本&#xff09;、button&#xff08;按钮&#xff09;、image&#xff08;图片&#xff09;、form&#xff08…