pageYOffset - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

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

在获取页面滚动距离的高度时候，往往有不同的获取方式，而且不同的属性浏览器支持稍有差别： pageYOffset：属window对象，IE9+、Firefox、Chrome、Opera均支持该方式获取页面滚动敢赌值...window.pageYOffset scrollY：属于window对象，Firefox、Chrome、Opera均支持，IE不支持，忽略DOCTYPE定义规则。...document.documentElement.scrollTop; //Chrome,Safari下为0 此在获取页面滚动高度的时候优先考虑使用 window.pageYOffset 然后在使用scrollTop...window.pageXOffset || document.documentElement.scrollLeft var _scrollTop = window.scrollY || window.pageYOffset

4.5K4 1

元素滚动 scroll 系列

页面被卷去的头部：可以通过window.pageYOffset 获得如果是被卷去的左侧window.pageXOffset 注意，元素被卷去的头部是element.scrollTop , 如果是页面被卷去的头部...则是 window.pageYOffset 其实这个值可以通过盒子的 offsetTop可以得到，如果大于等于这个值，就可以让盒子固定定位了 //1....页面被卷去的头部 // console.log(window.pageYOffset); // 3 .当我们页面被卷去的头部大于等于了 172 此时侧边栏就要改为固定定位...if (window.pageYOffset >= bannerTop) { sliderbar.style.position = 'fixed...声明了 DTD，使用 document.documentElement.scrollTop 未声明 DTD，使用 document.body.scrollTop 新方法 window.pageYOffset

1.5K2 0

您找到你想要的搜索结果了吗？

是的

没有找到

元素滚动 scroll 系列

页面被卷去的头部：可以通过window.pageYOffset 获得如果是被卷去的左侧window.pageXOffset 注意，元素被卷去的头部是element.scrollTop , 如果是页面被卷去的头部...则是 window.pageYOffset 其实这个值可以通过盒子的 offsetTop可以得到，如果大于等于这个值，就可以让盒子固定定位了 //1....页面被卷去的头部 // console.log(window.pageYOffset); // 3 .当我们页面被卷去的头部大于等于了 bannerTop...此时侧边栏就要改为固定定位 if (window.pageYOffset >= bannerTop) { sliderbar.style.position...声明了 DTD，使用 document.documentElement.scrollTop 未声明 DTD，使用 document.body.scrollTop 新方法 window.pageYOffset

1.6K3 0

仿淘宝返回顶部案例

：返回顶部带有动画的返回顶部此时可以继续使用我们封装的动画函数只需要把所有的left 相关的值改为跟页面垂直滚动距离相关就可以了页面滚动了多少，可以通过 window.pageYOffset...); // 当我们页面被卷去的头部大于等于171 此时侧边栏就要改为固定定位 if (window.pageYOffset >= banner.offsetTop)...Math.ceil((target - obj.offsetLeft) / 10); 因为有前进和后退所以要用判断条件 var sept = (target - window.pageYOffset...Math.ceil(sept) : Math.floor(sept); if (obj.window.pageYOffset == target) { //...10 // obj.style.left = obj.offsetLeft + sept + "px"; window.scroll(0, window.pageYOffset

1.6K2 0

返回顶部案例

带有动画的返回顶部此时可以继续使用我们封装的动画函数只需要把所有的left 相关的值改为跟页面垂直滚动距离相关就可以了页面滚动了多少，可以通过 window.pageYOffset...页面被卷去的头部 // console.log(window.pageYOffset); // 3 .当我们页面被卷去的头部大于等于了...当我们页面滚动到main盒子，就显示 goback模块 if (window.pageYOffset >= mainTop) { ...得到 var step = (target - window.pageYOffset) / 10; // 正数就向上取整，负数就向下取整...Math.ceil(step) : Math.floor(step); // 移动到指定位置就停止动画 if (window.pageYOffset

2K3 0

JavaScript案例：带动画的返回顶部

案例分析：带有动画的返回顶部继续使用我们封装的动画只需要把所有的left相关值改为跟页面垂直滚动距离相关就可以页面滚动了多少，可以通过 window.pageYOffset得到最后是页面滚动...obj.timer); obj.timer = setInterval(function () { var step = (target - window.pageYOffset...Math.ceil(step) : Math.floor(step); if (window.pageYOffset == target) {...callback(); } } //obj.style.left = window.pageYOffset...+ step + "px"; window.scroll(0, window.pageYOffset + step) }, 15);

1.2K1 0

1.元素滚动 scroll 系列

页面被卷去的头部：可以通过window.pageYOffset 获得如果是被卷去的左侧window.pageXOffset 注意，元素被卷去的头部是element.scrollTop , 如果是页面被卷去的头部...则是 window.pageYOffset 其实这个值可以通过盒子的 offsetTop可以得到，如果大于等于这个值，就可以让盒子固定定位了 //1....页面被卷去的头部 // console.log(window.pageYOffset); // 3 .当我们页面被卷去的头部大于等于了 172 此时侧边栏就要改为固定定位...if (window.pageYOffset >= bannerTop) { sliderbar.style.position = 'fixed...声明了 DTD，使用 document.documentElement.scrollTop 未声明 DTD，使用 document.body.scrollTop 新方法 window.pageYOffset

1.1K2 0

JavaScript案例：仿淘宝侧边栏

页面滚动事件 scroll document.addEventListener('scroll', function () { //console.log(window.pageYOffset...);页面被卷去的部分 //3.当我们页面被卷去的头部≥可被卷去的头部大小，侧边栏改为固定定位 if (window.pageYOffset >= bannerTop...sliderbar.style.top = '300px'; } //4.当我们页面滚到main模块，就显示返回顶部goBack if (window.pageYOffset

1.3K1 0

第49天：封装自己的scrollTop

：document.body.scrollTop 火狐和其他浏览器：document.documentElement.scrollTop IE9+和最新浏览器:window.pageXOffset; pageYOffset...(scrollTop) 兼容性写法： var scrollTop=window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop...//var json={left:10,right:10}; 18 //json.left 19 function scroll(){ 20 if(window.pageYOffset...和其他浏览器 21 return{ 22 left:window.pageXOffset, 23 top:window.pageYOffset

8531 0

浏览器兼容base.js

1.js滚动条兼容性 window.pageYOffset ：谷歌浏览器 document.documentElement.scrollTop ：ie 和其他浏览器 document.body.scrollTop...：火狐浏览器下面的代码封装在base.js里面日常使用 function scroll(){ if(window.pageYOffset !...= null){ return { top:window.pageYOffset, left

2.2K5 0

vue中返回顶部封装的组件滚动一定位置显示隐藏

this.listenerFunction); }, handleScroll() { // handleScroll 和 methods 是同级 if (window.pageYOffset...> 300) { //window.pageYOffset:获取滚动距离 this.isShow = true; } else { this.isShow...this.listenerFunction); }, handleScroll() { // handleScroll 和 methods 是同级 if (window.pageYOffset...> 300) { //window.pageYOffset:获取滚动距离 this.isShow = true; } else { this.isShow

2.5K3 0

jQuery源码解析之offset()

//返回所属文档的默认窗口对象（只读） //原点坐标 win = elem.ownerDocument.defaultView; //pageXOffset,pageYOffset...返回文档在窗口左上角水平 x 和垂直 y 方向滚动的像素 return { //16 0 // top: rect.top + win.pageYOffset...返回所属文档的默认窗口对象（只读） //原点坐标 let win = p.ownerDocument.defaultView; let offsetObj={ top: rect.top + win.pageYOffset...//伪代码 offset().top = elem. getBoundingClientRect().top + document. pageYOffset top: offset({top:15})...offset().top + position.top 也就是： offset({top:15}).top - (elem. getBoundingClientRect().top + document. pageYOffset

1.6K1 0

移动端返回顶部

当页面滚动某个地方，就显示返回顶部图标，否则隐藏点击可以返回顶部实现代码跟pc端一致案例分析：滚动某个地方显示事件：scroll页面滚动事件如果被卷去的头部（window.pageYOffset...nav = document.querySelector( 'nav'); window.addEventListener( 'scrol1', function() { if (window.pageYoffset

1.8K4 0

移动端返回顶部案例

1.案例：返回顶部当页面滚动某个地方，就显示，否则隐藏点击可以返回顶部 2.案例分析滚动某个地方显示事件：scroll页面滚动事件如果被卷去的头部（window.pageYOffset...nav = document.querySelector("nav"); window.addEventListener("scroll", function () { if (window.pageYOffset

1.8K2 0

浮动广告代码

if(IE) { diffY = document.body.scrollTop; diffX = document.body.scrollLeft; } if(NS) { diffY = self.pageYOffset...); if(whichIt.left < 0+self.pageXOffset) whichIt.left = 0+self.pageXOffset; if(whichIt.top pageYOffset...) whichIt.top = 0+self.pageYOffset; if( (whichIt.left + whichIt.clip.width) >= (window.innerWidth+self.pageXOffset...self.pageXOffset)-whichIt.clip.width)-17; if( (whichIt.top + whichIt.clip.height) >= (window.innerHeight+self.pageYOffset...-17)) whichIt.top = ((window.innerHeight+self.pageYOffset)-whichIt.clip.height)-17; return false; } return

2.8K2 0

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

为了兼容所有主流浏览器，一个更好的方式是直接使用window对象的pageXOffset和pageYOffset属性。...我们应该选择最简单高效且兼容所有主流浏览器的方式来实现它，那就是使用window.pageXOffset和window.pageYOffset属性。...alert('当前已从顶部滚动：' + window.pageYOffset);alert('当前已从左侧滚动：' + window.pageXOffset);这些属性是只读的。...window.pageYOffset 是 window.scrollY 的别名。基于浏览器API的滚动方法scrollToscrollTo 方法用于将页面或元素滚动到指定位置。...= window.pageYOffset const to = top + pageYOffset - scrollMarginTop rAFScrollTo(document.documentElement

8141 0

vue中页面跳转滚动条置顶（总结）

document.body.scrollTop = 0 // firefox document.documentElement.scrollTop = 0 // safari window.pageYOffset...document.body.scrollTop = 0 // firefox document.documentElement.scrollTop = 0 // safari window.pageYOffset

1.8K1 0

常见网页特效案例

：返回顶部带有动画的返回顶部此时可以继续使用我们封装的动画函数只需要把所有的left 相关的值改为跟页面垂直滚动距离相关就可以了页面滚动了多少，可以通过 window.pageYOffset...document.addEventListener('scroll', function() { // console.log(11); // window.pageYOffset...页面被卷去的头部 // console.log(window.pageYOffset); // 3 .当我们页面被卷去的头部大于等于了...172 此时侧边栏就要改为固定定位 if (window.pageYOffset >= bannerTop) { sliderbar.style.position...当我们页面滚动到main盒子，就显示 goback模块 if (window.pageYOffset >= mainTop) {

3K4 0

vue中页面跳转滚动条置顶（总结）

document.body.scrollTop = 0 // firefox document.documentElement.scrollTop = 0 // safari window.pageYOffset...document.body.scrollTop = 0 // firefox document.documentElement.scrollTop = 0 // safari window.pageYOffset

2.9K2 0

【Angular6+】事件绑定

button>" }) class App {} Scroll 事件 @HostListener('window:scroll', ['$event']) onScroll() { this.pageYOffset...= window.pageYOffset; } 5.

2.2K3 0

点击加载更多

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭