开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

window.pageYOffset与IE11上的window.scrollY

window.pageYOffset和IE11上的window.scrollY都是用于获取页面滚动的垂直距离的属性。

window.pageYOffset是W3C标准中定义的属性，它返回文档在垂直方向上滚动的像素值。如果页面没有发生垂直滚动，它的值为0。它适用于大多数现代浏览器，包括Chrome、Firefox、Safari等。

IE11上的window.scrollY是IE浏览器特有的属性，它也返回文档在垂直方向上滚动的像素值。与window.pageYOffset类似，如果页面没有发生垂直滚动，它的值也为0。

这两个属性的作用相同，都可以用于获取页面滚动的垂直距离。在大多数情况下，它们可以互换使用。

应用场景：

监听页面滚动事件：可以通过获取window.pageYOffset或window.scrollY的值来判断页面是否发生了滚动，并根据滚动的距离执行相应的操作，例如改变页面元素的样式、加载更多内容等。
实现滚动动画：可以利用window.pageYOffset或window.scrollY的值来实现平滑滚动效果，通过不断更新页面元素的位置来创建动画效果。

推荐的腾讯云相关产品和产品介绍链接地址：

腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
腾讯云云原生容器服务（TKE）：https://cloud.tencent.com/product/tke
腾讯云云数据库MySQL版（CDB）：https://cloud.tencent.com/product/cdb_mysql
腾讯云云存储（COS）：https://cloud.tencent.com/product/cos
腾讯云人工智能（AI）：https://cloud.tencent.com/product/ai

相关搜索:IE11上的calc()无效 IE11上的Vue的替代语法 ie11中的CSS grid与较少的混合 Flexbox问题出现在IE11上的表格上 <bgsound>不能在Windows10上的IE11上运行 IE11上的Angular 4动画无法正常工作 ie11上的Phoenix Vue polyfill空白屏幕 IE11和边缘上所选标签的奇怪行为显示: ie11中flex容器上的before元素带插件的IE11上的QuickBlox应用程序？window.pageYOffset总是返回0。(但仅在windows计算机上返回正确的数字，在Mac上)IE11: document.getSelection在IE11上的输入(即文本)标记内不能正常工作如何在ie11上修改flex-flow的问题？将输入元素与表中的IE11中的position: absolute居中带有SVG图像的Sphinx文档不能在IE11上渲染无法在IE11上查看::before中的伪元素内容 IE11上的React - event.target.getAttribute("id")返回null IE11上的Webpack + Angular(4) + ES6无法工作 IE11上enableProdMode的Angular 4命令行界面问题如何在IE11上更改fusion图表的字体系列

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

记几处原生JS的开发原

最近才正式接手工作，遇到很多奇葩的领导，总有很多奇葩的想法和理念。比如不让用jquery,不过要求兼容ie11和chrome ff,就行。放弃jquery开始感觉很难，写了两天，也还行。....namespace { opacity: .7; /*该行引起IE11的性能极大的下降，禁用！*/ } 1、IE11不允许classList.add 多个参数。...2、IE11中，在主界面中，获取了iframe初始的contentWindow后，如果再往里写入一个新页面，那么这个已经获取的window就无效了。...3、获取窗体滚动条的位置，IE11不支持window.scrollY，需要去其它属性找。...解决办法：window.scrollY || window.pageYOffset || document.documentElement.scrollTop 4、在IE11里访问iframe时，document.getElementById

2.1K2 0

获取页面滚动距离pageYOffset、scrollY、scrollTop

在获取页面滚动距离的高度时候，往往有不同的获取方式，而且不同的属性浏览器支持稍有差别： pageYOffset：属window对象，IE9+、Firefox、Chrome、Opera均支持该方式获取页面滚动敢赌值...window.scrollY 页面如果未定义DOCTYPE文档头，所有浏览器都支持docume.body.scrollTop属性获取滚动高度。...document.body.scrollTop 如果页面定义了DOCTYPE文档头，那么HTML元素上的scrollT属性在IE、Firefox、Opera（presto内核）下都可以获取滚动高度值，而在...document.documentElement.scrollTop; //Chrome,Safari下为0 此在获取页面滚动高度的时候优先考虑使用 window.pageYOffset 然后在使用scrollTop...|| window.pageYOffset || document.documentElement.scrollTop

3.7K4 1

图解浏览器的各种距离

类似这样，需要计算距离、宽高等的场景有很多。而浏览器里与距离、宽高有关的属性也有不少。今天我们来整体过一遍。...react-use 提供的 useMouse 的 hook 就解决了这个问题：它是用 e.pageY 减去 getBoundingClientRect().top 减去 window.pageYOffset...这里的 getBoundingClientRect 是返回元素距离可以可视区域的距离和宽高的：而 window.pageYOffset 也叫 window.scrollY，顾名思义就是窗口滚动的距离。...还有，这里的 window.pageYOffset 过时了，简易换成 window.scrollY，是一样的：当然，你也可以访问原生事件对象，拿到 offsetY 属性：此外，窗口的滚动距离用 window.scrollY...根元素 documentElement 的 scrollTop 就是 window.scrollY：然后 window.innerHeight、window.innerWidth 是窗口的宽高，也就是可视区域的宽高

1571 0

整理获取 viewport 和 element 尺寸和位置方法

页面滚动位置返回整个页面的滚动的位置，pageYOffset/pageXOffset 与 scrollY/scrollX 返回的值一致，前者是后者的别名，建议使用前者，不支持 IE8 window.pageYOffset...如果是 document.body，并且是在混杂模式下，那么返回的是不包含滚动条的视口尺寸 clientLeft/clientTop 返回的是计算后的 CSS 样式的 border-left-width.../border-top-width 的值，就是边框的宽度 offsetWidth/offsetHeight 同样可以使用 offsetWidth/offsetHeight 来获取元素包括滚动条和边框的尺寸...、absolute 或 fixed 的元素）的左右偏移值 offsetLeft/offsetTop 返回元素 X Y 坐标值计算元素的位置： function getElementPosition(e...，那么返回 window.scrollY 的值如果元素是 body，并且在混杂模式下，那么返回的是 window.scrollY 的值因此可用于处理页面滚动的距离的兼容

1.3K2 0

js获取各种距离和宽高

返回窗口内部的高度/宽度(不包含工具栏和滚动条) window.pageXOffset/window.pageYOffset 文档在窗口左上角水平和垂直方向滚动的像素 window.pageYOffset...window.scrollY 浏览器滚动掉的Y距离 document 可视区域 document.documentElement.offsetHeight(不包括外边距) document.documentElement.clientHeight...浏览器滚动掉的Y距离鼠标event事件属性说明 offsetX 以当前的元素的左上角为原点, 距离元素顶部的距离 offsetY 以当前的元素的左上角为原点, 距离元素左侧的距离 clientX...以计算机显示屏屏幕左上角为原点, 距离屏幕左侧的距离元素的宽高及各种距离宽高属性说明 clientHeight/clientWidth 包括元素的可视部分的高度/宽度包括width/height...此属性可以获取或者设置对象的最顶部到对象在当前窗口显示的范围内的顶边/左侧的距离，也就是元素滚动条被向下/向右拉动的距离。

2311 0

从IE6到IE11上运行WebGL 3D遇到的各种坑

对于我们无力要求升级的IE678910上要跑WebGL，我们只能采用Google Chrome Frame的解决方案，虽然该插件Google从2014年1月份起就不再维护更新了，但已经发布的版本也是31...还好，我们遇到的不少项目还是允许购买新机器或者升级新浏览器系统的，但这并不以为这能上IE11就问题结束了，微软这哥们对新标准的支持要嘛落后半拍，要嘛明知标准就这样我TMD的就不实现你能咋地，相信preserve...CSS3的问题下回再扯淡，那是个无穷无尽的话题，回到我们的号称支持WebGL的IE11，至从一年前有人泄露IE11将支持WebGL就引得业界一片兴奋，千呼万唤始出来后居然还有那么多缺陷，但终归还是大好事...，迈出第一步是最难的，相信微软会慢慢完善，但毕竟活在当下的我们还得继续填Shading Language上的几个坑： 1、lineWidth不让设置，只支持1个像素的连线，只能用一个像素将就着，或者把线采用构建模型的重方式来替代...的HT for Web等3D引擎封装的框架自然都会帮我们应用层屏蔽这些坑，但相信很多引擎并还未对IE11做考虑，毕竟这哥们市场占有率还不高，等足够高了值得考虑时也许微软自己已经填补好了坑，无需我们再操心了

7843 0

js中clientWidth, scrollWidth, innerWidth, outerWidth和offsetWidth属性的区别

js中clientWidth, scrollWidth, innerWidth, outerWidth,offsetWidth的属性汇总，测试浏览器：ie7~ie11、chrome 和 firefox等...div#b1 的值。...ie7~ie11、chrome 和 firefox 结果一致，如下： ? （3）图解结果 ?...outerHeight=" + window.outerHeight); console.log("pageXOffset="+window.pageXOffset, "pageYOffset=" + window.pageYOffset...screenLeft="+window.screenLeft, "screenTop=" + window.screenTop); } （2）图解结果（不同浏览器下，console 输出与下图部分有不同

2.3K2 0

Web浏览器滚动方案一览｜ rAF等

Window 大小与文档大小要获取窗口大小和文档大小，我们可以使用JavaScript编程语言。...通过使用这些属性，我们可以对网页进行响应式设计，并确保其在不同设备上的显示效果良好。...window.pageYOffset 是 window.scrollY 的别名。基于浏览器API的滚动方法scrollToscrollTo 方法用于将页面或元素滚动到指定位置。...该页面将“冻结”在其当前滚动位置上。这个方法的缺点是会使滚动条消失。如果滚动条占用了一些空间，它原本占用的空间就会空出来，那么内容就会“跳”进去以填充它。...« 张鑫旭-鑫空间-鑫生活平滑滚动的实现(上) - 掘金

1501 0

从IE6到IE11上运行WebGL 3D遇到的各种坑

对于我们无力要求升级的IE678910上要跑WebGL，我们只能采用Google Chrome Frame的解决方案，虽然该插件Google从2014年1月份起就不再维护更新了，但已经发布的版本也是31...还好，我们遇到的不少项目还是允许购买新机器或者升级新浏览器系统的，但这并不以为这能上IE11就问题结束了，微软这哥们对新标准的支持要嘛落后半拍，要嘛明知标准就这样我TMD的就不实现你能咋地，相信preserve...CSS3的问题下回再扯淡，那是个无穷无尽的话题，回到我们的号称支持WebGL的IE11，至从一年前有人泄露IE11将支持WebGL就引得业界一片兴奋，千呼万唤始出来后居然还有那么多缺陷，但终归还是大好事...，迈出第一步是最难的，相信微软会慢慢完善，但毕竟活在当下的我们还得继续填Shading Language上的几个坑： 1、lineWidth不让设置，只支持1个像素的连线，只能用一个像素将就着，或者把线采用构建模型的重方式来替代...的HT for Web等3D引擎封装的框架自然都会帮我们应用层屏蔽这些坑，但相信很多引擎并还未对IE11做考虑，毕竟这哥们市场占有率还不高，等足够高了值得考虑时也许微软自己已经填补好了坑，无需我们再操心了

1.7K5 0

详解各种获取元素宽高及位置的属性

offsetParent HTMLElement.offsetParent 是一个只读属性，返回一个指向最近的（closest，指包含层级上的最近）包含该元素的定位元素。...没有垂直滚动条的情况下，scrollHeight值与元素视图填充所有内容所需要的最小值clientHeight相同。包括元素的padding，但不包括元素的border和margin。...，其中 pageYOffset 属性是 scrollY 属性的别名 var scrollX = window.scrollY; 完整的获取文档/页面在垂直方向已滚动的像素值的兼容性代码： var y =...(window.pageYOffset !...window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop

4K8 0

页面中元素的吸顶

这是我参与「掘金日新计划 · 8 月更文挑战」的第11天，点击查看活动详情 >> [前言] 现在由于医嘱开立界面需要对新开的输入框进行首行或者尾行的行固定效果，使用的实现方案只能在谷歌浏览器90.0...sticky满足条件变成fixed定位时，与标准fixed元素不一样，不会脱离文档流 sticky 定位的元素不能添加一个只包含自身的父元素,会导致没有粘滞效果同一个父级元素中的sticky元素，如果定位值相等...可以看出这个属性的兼容性不是那么好，如果项目需要兼容到ie11等的话，就不是那么适用了 [二、使用offsetTop] HTMLElement.offsetTop 为只读属性，它返回当前元素相对于其 offsetParent...元素的顶部内边距的距离。...let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop

1.2K3 0

网页上的复制与剪切

网页上的复制与剪切这篇文章翻译自HTML5ROCKS的Cut and Copy Commands。...当选中了浏览器中的任意文本，只要执行这个方法就可以剪切或拷贝这段文字。有了这个API后，选中一段文字并拷贝会变的非常简单。这个API和Selection API一起使用时将会变的特别有用。...一个简单的例子让我们来增加一个按钮，点击这个按钮会拷贝一个email地址到用户的剪切版。.../images/copy-icon.png" /> 接下来在Javascript中，我们增加一个click事件监听器到按钮上。...()方法选中链接的文本。

1.5K2 0

DevOps的分与合（上）

DevOps 的概念建立在建立团队之间协作文化的基础上，这些团队过去一直在相对孤岛中运作。...）通过剖析运维工程师的工作内容变化来讨论 DevOps 的分与合。...这属于 DevOps 的分离的场景，团队与团队之间有工作压力不均，信任感缺失，目标不一致等问题，建议尝试做一些业务运维的左移，也即在合适的工具系统基础上把业务运维的部分权力或者人员分配到开发团队，使之可以完成大部分的程序发布...形成下图效果，从人员上可以是开发兼职业务运维，也可以是开发团队有专职业务运维人员，其本质是业务运维的主要工作闭环在开发团队内部，实现高效运转。...如此种种，基础设施运维的工作都右移给了云。当然这个右移不是一蹴而就的，是个渐进的过程，需要行业慢慢去接受，也需要云的成熟与发展。

3863 0

Linux上mariadb的安装与配置

yum源安装MySQL和开启设置服务　　首先，我们来看看使用yum源安装MySQL的优缺点：　　优点：安装方便快捷，安装方式简单　　缺点：太过于死板，定死了各个文件的位置 1、打开官方网站，上边有各种版本的...2、如果我们使用官网上的版本，就要按照官网的提示来配置我们的yum源。...我们可以看出，我们可以匿名登录，而且即使我们切换成了普通用户，我们运行数据库以后，依然默认是root登录，可以对数据库进行查看以及删除等操作，这样无疑是很不安全的，所以就需要进行我们的下一步操作： 5、...二进制安装mariadb和开启设置服务注意：安装之前要确保自己系统上没有mariadb服务，有老版本可以先卸掉 1、rpm -qi mariadb 可以查询官网 ?...去官网下载自己想要的版本 http://mariadb.org 在虚拟机中把下好的包上传（rz），并对其进行解包解压缩： tar xvf mariadb-10.2.8-linux-x86_64.tar.gz

4.4K3 0

Linux上Java的安装与配置

由于使用 yum 或者 apt-get 命令安装 openjdk 可能存在类库不全，从而导致用户在安装后运行相关工具时可能报错的问题，所以此处我们推荐采用手动解压安装的方式来安装 JDK。...具体步骤如下： 1.下载 JDK 下载合适的 JDK 版本，准备安装。注意：这里需要下载 Linux 版本。...这里以jdk-8u151-linux-x64.tar.gz为例，你下载的文件可能不是这个版本，这没关系，只要后缀(.tar.gz)一致即可。 2....创建目录在/usr/目录下创建java目录， mkdir /usr/java cd /usr/java 只听到从山间传来架构君的声音: 板桥人渡泉声，茅檐日午鸡鸣。有谁来对上联或下联?...把下载的文件 jdk-8u151-linux-x64.tar.gz 放在/usr/java/目录下。 3.

5.6K4 0

数据上链的原则与方式

实际上，我们在对传统项目进行链改的过程中，由于区块链的特殊特性，并不能作为传统数据库使用，而是要将关系数据库、区块链结合，进行业务分析，将能上链的，有必要上链的数据进行区块链上链改造。...如果我们的大文件有上链的需求，可以采用哈希上链的方式，要么直接计算哈希值，然后将哈希上链，要么结合IPFS去中心化存储技术，将大文件存储到IPFS网络中，然后IPFS会给出一个特殊的哈希值，将该哈希值上链...如果有上链的需求，我们可以将数据存储在私有的数据库或者IPFS中，然后哈希上链，也可以通过密码学的方法进行加密，然后密文上链。 3. 大量、冗余重复的数据不直接上链。比如系统日志。...三、数据上链的方式 1.原文上链。...，而且节点与节点之间的通讯是通过TLS加密的，所以即使黑客截取了网络包，也无法知道区块链网络中传输的内容，从而保证了数据的安全。

1.6K3 0

SAP MM 采购发票上的价格与采购订单上价格的差异

SAP MM 采购发票上的价格与采购订单上价格的差异对于标准价作为价格控制的商品，如果发票的价格与采购订单价格不同，则SAP系统会将差异计入OBYC-PRD配置到的总账科目里。...商品号698的价格控制方式是S，评估类是3300，单价是1 EUR/EA。如下的采购订单，已经完成了收货和发票校验过账。...PO价格是1 EUR，Invoice价格是1.2 EUR 检查该发票里的财务凭证，看其会计分录，差异金额是200EUR，其中的总账科目231000就是OBYC-PRD里配置的科目， -完- 写于

1.2K2 0

Nginx在Linux上的安装与配置

Nginx在Linux上的安装与配置 1.nginx与依赖库下载 nginx下载地址: http://nginx.org/ pcre(Perl Compatible Regular.../configure --prefix=/usr/local/nginx # make # make install 5.运行nginx，默认的端口是80.

1.1K1 0

面向协议编程与 Cocoa 的邂逅 (上)

本文笔者在 MDCC 16 (移动开发者大会) 上 iOS 专场中的主题演讲的文字整理。...相比与传统的面向对象编程 (OOP)，POP 显得更加灵活。结合 Swift 的值语义特性和 Swift 标准库的实现，这一年来大家发现了很多 POP 的应用场景。...protocol 是 Swift 语言的底座，语言的其他部分正是在这个底座上组织和建立起来的。这和我们熟知的面向对象的构建方式很不一样。...所谓协议，就是一组属性和/或方法的定义，而如果某个具体类型想要遵守一个协议，那它需要实现这个协议所定义的所有这些内容。协议实际上做的事情不过是“关于实现的约定”。...上添加 extension。

6012 0

GitHub Pages 与 Gitee Pages 上的 Jekyll

GitHub 与 Gitee 提供的 Pages 服务中，均内嵌了 Jekyll 支持（Gitee 还提供了 Hugo 与 Hexo 支持）。...本来我的Jekyll在github pages上，但是国内访问太慢了，准备迁移到Gitee上，结果发现效果完全和Github上不同，必须要在本地环境编译再push, 算了懒得折腾了。...根据GitHub Pages 与 Gitee Pages 上的 Jekyll的分析，可以得出以下几个结论： Gitee Jekyll 的版本很旧了，一整套工具可能只是 2017 年末的「最新版」。...找到了 Gitee Pages 的上线说明，发布时间是在 2018 年年中，差不太远（也许前端支持做好之后半年在做后端支持）。...Gitee Jekyll 竟然支持 GitHub 上的远程主题，但是用起来似乎也存在若干问题，不稳定。以上三条再归纳为一个最终的结论：（目前的）Gitee Jekyll 不可靠。

3831 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭