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

最新推荐文章于 2024-07-11 09:09:09 发布

在线小白www

最新推荐文章于 2024-07-11 09:09:09 发布

阅读量5.8k

点赞数 3

原文链接：https://www.cnblogs.com/acaciasun/articles/3338255.html

版权

JavaScript 同时被 2 个专栏收录

128 篇文章 7 订阅

订阅专栏

jQuery

109 篇文章 3 订阅

订阅专栏

在获取页面滚动距离的高度时候，往往有不同的获取方式，而且不同的属性浏览器支持稍有差别：

pageYOffset：属window对象，IE9+、Firefox、Chrome、Opera均支持该方式获取页面滚动敢赌值，并且会忽略DOCTYPE定义规则。

window.pageYOffset

scrollY：属于window对象，Firefox、Chrome、Opera均支持，IE不支持，忽略DOCTYPE定义规则。

window.scrollY

页面如果未定义DOCTYPE文档头，所有浏览器都支持docume.body.scrollTop属性获取滚动高度。

document.body.scrollTop

如果页面定义了DOCTYPE文档头，那么HTML元素上的scrollT属性在IE、Firefox、Opera（presto内核）下都可以获取滚动高度值，而在Chrome和Safari下其值为0。

document.documentElement.scrollTop; //Chrome,Safari下为0

此在获取页面滚动高度的时候优先考虑使用 window.pageYOffset 然后在使用scrollTop。

 var _scrollLeft = window.scrollX || window.pageXOffset || document.documentElement.scrollLeft
 var _scrollTop = window.scrollY || window.pageYOffset || document.documentElement.scrollTop

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

在线小白www

关注关注

3
点赞
踩
11

收藏

觉得还不错? 一键收藏
2
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

滚动距离、可视窗口大小的获取以及兼容模式写法

weixin_43933771的博客

07-16

515

获取滚动距离的兼容模式写法常规方法：（1）window.pageXOffset/pageYOffset （注意：IE8及以下是不支持的）（2）document.body.scrollLeft/scrollTop （注意：IE8及以下是支持的）（3）document.documentElement.scrollLeft/scrollTop （注意：IE8及以下是支持的）（4）window.scrollX/scrollY 兼容模式的封装写法： <script> //我们还是在这

window.pageXOffset /pageYOffset 和 scrollLeft、scrollTop 返回当前页面相对于窗口显示区左上角的坐标位置

weixin_41796631的博客

04-19

2579

用法：返回网页视区左上角的起始点相对于浏览器的X,Y位置 pageXOffset 设置或返回当前页面相对于窗口显示区左上角的 X 位置。 pageYOffset 设置或返回当前页面相对于窗口显示区左上角的 Y 位置。语法： window.pageXOffset window.pageYOffset pageXOffset 和 pageYOffset 属性相等于 scrol...

2 条评论您还未登录，请先登录后发表或查看评论

javascript 实现滚动条滚动到一定距离时显示层

02-23

javascript 实现滚动条滚动到一定距离时显示层可以兼容全部浏览器。

JS获取页面滚动距离

qq_40147756的博客

06-30

4178

获取或设置一个元素的内容垂直滚动的像素数。返回文档在垂直方向已滚动的像素值。

页面滚动距离

m0_60684417的博客

01-03

626

页面滚动距离 window.onscroll=()=>{ console.log(document.documentElement.scrollTop); }

获取页面滚出去距离

gaoyan426926的博客

12-06

513

获取页面滚出去距离 ● scrollLeft和scrollTop用在一个div上的，获取的是这个盒子往左、往上滚出去的距离 ● 需求：获取整个网页内容往上滚出去的距离 ● 可以！ ● 但是，网页所有dom元素都在 html 里，所以你要获取网页内容滚出去的距离，其实就是应该获取 html 的scrollLeft 和 scrollTop ● 获取html document.documentElement ● 获取整个网页往上滚出去的距离 document.documentElement.scroll

JS-获取网页滑动距离，并实时监听

热门推荐

weixin_43937466的博客

09-05

1万+

本文主要介绍通过JS获取网页滑动距离，并实时监听的方法。分析document.body.scrollTop、document.documentElement.scrollTop、window.pageYOffset 三者之间的区别。

var timeout = prompt("设置刷新时间间隔[S]"); var current = location.href; if(timeout > 0) { setTimeout('reload()', 1000 * timeout); } else { location.replace(current); } function reload() { var scrollX = document.body.scrollLeft;// 获取之前页面的滚动位置 var scrollY = document.body.scrollTop; var currentScrollPosition = window.pageYOffset || document.documentElement.scrollTop; setTimeout('reload()', 1000 * timeout); var fr4me = '<frameset cols=\'*\'>\n<frame src=\'' + current + '\' onload=\'setScroll(' + scrollX + ',' + scrollY + ')\'/>'; // var fr4me = '<frameset cols=\'*\'>\n<frame src=\'' + current + '\' onload=\'setScroll(' + currentScrollPosition + ')\'/>'; fr4me += '</frameset>'; with(document) { write(fr4me); void(close()); } } function setScroll(scrollX, scrollY) { // 设置新页面的滚动位置为之前页面的滚动位置 window.scrollTo(scrollX, scrollY); }帮我看看这段代码有什么问题？我想实现的功能是在谷歌浏览器控制台中运行这个脚本后可以自动刷新页面和保持原浏览的位置，但是好像无法实现

06-09

// 获取之前页面的滚动位置 var scrollY = document.body.scrollTop; var currentScrollPosition = window.pageYOffset || document.documentElement.scrollTop; var fr4me = '*\'>\n(' + scrollX + ',' + ...

解决多种浏览器获取滚动条高度

11-28

2. **`document.documentElement.scrollTop`**：在标准模式下，可以使用此属性获取文档滚动的距离。 3. **`document.body.scrollTop`**：在怪异模式下，可以使用此属性获取文档滚动的距离。 4. **`navigator....

vue 获取屏幕滚动条位置

07-15

这两个属性都可以用来获取滚动条距离页面顶部的距离。例如： ```javascript // 在 Vue 组件中获取滚动条位置 export default { mounted() { window.addEventListener('scroll', this.handleScroll); }, ...

20.js获取页面卷去的距离以及滚到到指定位置

最新发布

weixin_55688275的博客

07-11

324

window.onscroll 监听滚动事件 window.scrollTo滚动到指定位置

五、滚动距离与高度、兼容模式、可视尺寸

布白的博客

02-08

1954

五、滚动距离与高度、兼容模式、可视尺寸一、滚动距离与高度(页面偏移量) 滚动距离与高度：实际上是页面移动的距离，而不是滚动条移动的距离。查看滚动条的距离：常规方法: window.pageXOffset/pageYOffset IE9某一些版本/IE8及以下没有常规方法，有自己的方法 document.body.scrollLeft/scrollTop document.documentElement.scrollLeft/scrollTop 为什么有两个方法：不同的浏览器中它俩的值总是一个是0，另

这是一篇关于获取页面的各种距离总结

a_xia_o的博客

08-15

368

与 clientHeight 和 clientWidth 相比，我想这对属性用的更多一点，因为更多的时候我们需要获取的是元素的完整宽高。offset 有偏移的意思，所以这里也可以理解为鼠标位置相对于目标元素内部左上角的偏移值，和目标元素本身以及外部的元素都无关。分别点击 hello 元素的绿色边框和空白区域，会发现前者的值为负数，后者的值为整数，且都是相对空白区域的左上角开始计算的。分别返回元素的高度和宽度，包括元素本身的高和宽、padding 和 border ，以及滚动条的高和宽。

根据页面滚动的距离确定导航栏是否置顶

baidu1023737029的博客

11-23

749

默认情况下导航栏是页面的一部分，页面滚动，当导航栏的位置位于屏幕顶部时，导航栏置顶代码（基于jQuery）： //jQuery $(function(){ //获取导航距离页面顶部的距离 var toTopHeight = $(".timeNav").offset().top; //监听页面滚动 $

javascript检测滚动的距离

守鹤

03-14

1万+

js window.onscroll = function () { var t = document.documentElement.scrollTop || document.body.scrollTop; if (t > 27) { } else if (t == 0) { }}

scrollY offsetTop pageYOffset scrollTop

weixin_63681863的博客

11-26

203

是一个只读属性，用于获取某个元素相对于其 offsetParent 元素的顶部内边距的距离。换句话说，它表示了一个元素的上外边框至其 offsetParent 元素的上内边框之间的像素距离。对象的一个只读属性，它返回文档在垂直方向已滚动的像素值。当涉及到页面滚动时，这些属性和方法扮演了不同的角色。总结来说，这些属性和方法都与页面滚动有关，但它们的作用对象和具体含义略有不同。是一些元素对象的只读属性，用于获取或设置一个元素的内容垂直滚动的像素数。对象的一个只读属性，它返回文档在垂直方向已滚动的像素值，与。

scroll 方法获取滚轴距离顶部高度滚动

web修理工

10-28

2055

$(window).scroll(function(){ 　　var supportPageOffset = window.pageXOffset !== undefined; // 判断是否支持pageXOffset 　　var isCSS1Compat = ((document.compatMode || "") === "CSS1Compat"); // 判断渲染模式是不是标准模式　　var y = supportPageOffset ? window.pageYOffset : isCSS1Com

计算滚动条距离

别提昨天的博客

06-15

1212

function getScrollTop() { var scrollPos; if (window.pageYOffset) { scrollPos = window.pageYOffset; } else if (document.compatMode && documen

获取页面滚动过的距离

weixin_30627381的博客

01-09

1120

前提：html\body高度都超过屏幕高，普通的长页面。 $("body").scrollTop() chrome浏览器中一直是0； $("html,body").scrollTop() sume中一直是0；最稳妥方法： $(document).scrollTop()。转载于:https://www.cnblogs.com/wangxiaohang/p/8250529.ht...