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

news/2024/4/27 16:03:10

在学习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.cpky.cn/p/10880.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈,一经查实,立即删除!

相关文章

基于spring boot的体育场馆设施预约系统

摘 要 时代在飞速进步&#xff0c;每个行业都在努力发展现在先进技术&#xff0c;通过这些先进的技术来提高自己的水平和优势&#xff0c;体育场馆设施预约系统当然不能排除在外。体育场馆设施预约系统是在实际应用和软件工程的开发原理之上&#xff0c;运用java语言以及Sprin…

python爬虫实战——小红书

目录 1、博主页面分析 2、在控制台预先获取所有作品页的URL 3、在 Python 中读入该文件并做准备工作 4、处理图文类型作品 5、处理视频类型作品 6、异常访问而被中断的现象 7、完整参考代码 任务&#xff1a;在 win 环境下&#xff0c;利用 Python、webdriver、JavaS…

WEB 表单练习题

任务如图&#xff1a; <html><head><meta charest"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</title> </head><body><table width"…

基于Python3的数据结构与算法 - 16 链表

目录 链表 1. 创建链表 2. 链表的插入和删除 3. 双链表 4. 链表总结 链表 链表是由一系列节点组成的元素集合。每个节点包含两部分&#xff0c;数据域item和指向下一个节点得指针next。通过节点之间的相互连接&#xff0c;最终串联成一个链表。 class Node:def __init…

力扣24. 两两交换链表中的节点

新建虚拟头节点&#xff0c;用3个指针记录前3个节点&#xff0c;然后再相互赋值指向&#xff0c;再移动当前节点&#xff0c;当前节点所在的位置&#xff0c;只能交换该节点的后两个节点&#xff08;所以必须建立虚拟头节点&#xff0c;才能操作第1&#xff0c;2个节点&#xf…

HCIP —— 交换 (VLAN)

VLAN --- 虚拟局域网 在 HCIA 中 &#xff0c;已经学过交换机的一些基础配置&#xff0c;下面进行回顾一些简单的内容。 1.创建VLAN VLAN ID --- 区别和标识不同的VLAN 使用范围&#xff1a;0-4095 &#xff0c; 由12位二进制构成。 0 和 4095 作为 保留的VLAN。 …