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,一经查实,立即删除!

相关文章

【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;或者将它的刚体属性设置…

文件的基础

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

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…

【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;尽量清晰地描述你想要的图像内容。使用具体…

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…

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

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

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

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

Sentinel篇:线程隔离和熔断降级

书接上回&#xff1a;微服务&#xff1a;Sentinel篇 3. 隔离和降级 限流是一种预防措施&#xff0c;虽然限流可以尽量避免因高并发而引起的服务故障&#xff0c;但服务还会因为其它原因而故障。 而要将这些故障控制在一定范围&#xff0c;避免雪崩&#xff0c;就要靠线程隔离…

【Visual Studio】VS转换文件为UTF8格式

使用高级保存选项 更改VS的编码方案 首先需要打开高级保存选项 然后打开 文件 —> 高级保存选项 即可进行设置

OSPF协议全面学习笔记

作者&#xff1a;BSXY_19计科_陈永跃 BSXY_信息学院 注&#xff1a;未经允许禁止转发任何内容 OSPF协议全面学习笔记 1、OSPF基础2、DR与BDR3、OSPF多区域4、虚链路Vlink5、OSPF报文6、LSA结构1、一类/二类LSA&#xff08;Router-LSA/Network-LSA&#xff09; 更新完善中... 1、…

ChatGPT :确定性AI源自于确定性数据

ChatGPT 幻觉 大模型实际应用落地过程中&#xff0c;会遇到幻觉&#xff08;Hallucination&#xff09;问题。对于语言模型而言&#xff0c;当生成的文本语法正确流畅&#xff0c;但不遵循原文&#xff08;Faithfulness&#xff09;&#xff0c;或不符合事实&#xff08;Factua…

C++——string

一学习string的原因 1.从个人理解角度上&#xff1a; 在刚开始学习之前&#xff0c;我只知道学习完string在以后的刷题中能提高做题效率&#xff0c;在对字符串的处理string库中也许有对应的接口去实现需求&#xff0c;不用自己去写函数的实现。 但在学string中改变了之前的…

【PyTorch】基础学习:一文详细介绍 torch.save() 的用法和应用

【PyTorch】基础学习&#xff1a;一文详细介绍 torch.save() 的用法和应用 &#x1f308; 个人主页&#xff1a;高斯小哥 &#x1f525; 高质量专栏&#xff1a;Matplotlib之旅&#xff1a;零基础精通数据可视化、Python基础【高质量合集】、PyTorch零基础入门教程&#x1f44…