获取页面scroll高度

记录一下获取 scroll 高度的方法
经实际测试: document.body.scrollTop 在 chrome 下会返回0.
所以 document.documentElement.scrollTop 或者 window.pageYOffset 需要一起判断, 做一下兼容
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
获取视口区域的高度

    var viewportSize = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

获取一个元素的高度(一个元素距离顶部的高度, 这个是一定的, 决定了这个元素在页面的某一个位置)

document.querySelector("selector").offsetTop

应用:
如果scroll的高度大于了元素所在位置的高度, 那么需要进行加载 (lazy load)

原文地址:https://www.cnblogs.com/asdfq/p/10468797.html

时间: 2024-10-06 22:53:24

获取页面scroll高度的相关文章

javascript 获取页面的高度及滚动条的位置的代码

http://www.jb51.net/article/23331.htm javascript 获取页面的高度及滚动条的位置的代码 作者: 字体:[增加 减小] 类型:转载 javascript获取页面的高度及滚动条的位置的代码,需要的朋友可以参考下. 复制代码代码如下: var Viewport={ top : function(){ return window.pageYOffset || document.documentElement && document.documentEl

document.documentElement.clientHeight 和 $(window).height() 无法正确获取页面可视区高度

背景: 弹出层插件(自适应) 实现过程中突然发现在获取可视区高度时,无论document.documentElement.clientHeight 还是 $(window).height()都无法正确获取,代码没有问题: 解决方案:通过 cosole.log寻找错误点发现$(window).height()获取不正常并等于$(document).height():网上查找资料是由于没有正确的HTML5文档声明导致的 正确: <!DOCTYPE html> <html> <!-

JavaScript获取页面宽度高度

网页可见区域宽:document.body.clientWidth网页可见区域高:document.body.clientHeight网页可见区域宽:document.body.offsetWidth(包括边线的宽)网页可见区域高:document.body.offsetHeight(包括边线的宽)网页正文全文宽:document.body.scrollWidth网页正文全文高:document.body.scrollHeight网页被卷去的高:document.body.scrollTop(I

JavaScript获取页面宽度高度大全

网页可见区域宽:document.body.clientWidth网页可见区域高:document.body.clientHeight网页可见区域宽:document.body.offsetWidth(包括边线的宽)网页可见区域高:document.body.offsetHeight(包括边线的宽)网页正文全文宽:document.body.scrollWidth网页正文全文高:document.body.scrollHeight网页被卷去的高:document.body.scrollTop(I

[转载]js 和 jquery 获取页面和滚动条的高度 视口高度文档高度

转载自:http://www.cnblogs.com/rainbow661314/p/3317106.html js 和 jquery 获取页面和滚动条的高度 //页面位置及窗口大小 function GetPageSize() { var scrW, scrH; if(window.innerHeight && window.scrollMaxY) {    // Mozilla scrW = window.innerWidth + window.scrollMaxX; scrH = w

jqery和js获取页面高度,滚动条高度

网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网页可见区域宽: document.body.offsetWidth (包括边线的宽)网页可见区域高: document.body.offsetHeight (包括边线的高)网页正文全文宽: document.body.scrollWidth网页正文全文高: document.body.scrollHeight网页被卷去的高: document.body.sc

jq弹窗(获取页面宽高,滚轮高度,始终居中)

jq写一个弹窗,效果如上图所示, 点击按钮弹窗弹出,右上角关闭. 弹窗始终显示在页面中间,无论放大缩小窗口,滚轮滚动. 代码如下: html: <br><br><br><br> <button>弹出</button> <div id="tanchuang"> <span id="close">×</span> </div> <br>&l

Js动态获取iframe子页面的高度总结

问题的缘由 产品有个评论列表引用的是个iframe,高度不固定于是引发这个总结. 方法1:父级页面获取子级页面的高度 给元素设置高度 这方法是用在父级页面里的,通过获取子级页面的高度给iframe设置高度 涉及了一些兼容问题: IE用attachEvent | 3C用onload来判断子页面是否加载完成. IE用contentWindow | 3C用contentDocument来获取子页面 IE用document.documentElement.scrollHeight(兼容ie6 ie7)|

javascript 获取页面高度(多种浏览器)(转)

关于获取各种浏览器可见窗口大小的一点点研究 <script> function getInfo() { var s = ""; s += " 网页可见区域宽:"+ document.body.clientWidth; s += " 网页可见区域高:"+ document.body.clientHeight; s += " 网页可见区域宽:"+ document.body.offsetWidth + " (