记录一下获取 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)

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

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

    http://www.jb51.net/article/23331.htm javascript 获取页面的高度及滚动条的位置的代码 作者: 字体:[增加 减小] 类型:转载   javascript ...

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

    背景: 弹出层插件(自适应) 实现过程中突然发现在获取可视区高度时,无论document.documentElement.clientHeight 还是 $(window).height()都无法正确 ...

  3. js获取页面宽度高度及屏幕分辨率

    网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWid ...

  4. javascript获取页面各种高度

    网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网页可见区域宽: document.body.offsetWi ...

  5. JavaScript获取页面宽度高度

    网页可见区域宽:document.body.clientWidth网页可见区域高:document.body.clientHeight网页可见区域宽:document.body.offsetWidth ...

  6. js 和 jquery 获取页面和滚动条的高度 视口高度文档高度

    js 和 jquery 获取页面和滚动条的高度 //页面位置及窗口大小 function GetPageSize() { var scrW, scrH; if(window.innerHeight & ...

  7. js获取页面高度赋值给div

    <script type="text/javascript"> window.onload=function(){ map_width=document.body.cl ...

  8. jquery获取文档高度和窗口高度的例子

    jquery获取文档高度和窗口高度,$(document).height().$(window).height() $(document).height():整个网页的文档高度 $(window).h ...

  9. jquery获取页面相关尺寸

    $(windows).width();获取页面可视宽度 $(windows).height();获取页面可视高度 $(document).height();获取页面内容的总高度 $(document) ...

随机推荐

  1. web API .net - .net core 对比学习-文件目录概述

    个人正在学习.net web Api的相关知识,因此用这一系列博客做一记录. 1. 首先我们分别创建 .net web api 项目和 .net core web api 项目. 2. 我们首先比较一 ...

  2. 2019 鹏博士java面试笔试题 （含面试题解析）

      本人5年开发经验.18年年底开始跑路找工作,在互联网寒冬下成功拿到阿里巴巴.今日头条.鹏博士等公司offer,岗位是Java后端开发,因为发展原因最终选择去了鹏博士,入职一年时间了,之前面试了很多 ...

  3. Android笔记(七十四) 详解Intent

    我们最常使用Intent来实现Activity之间的转跳,最近做一个app用到从系统搜索图片的功能,使用到了intent的 setType 方法和 setAction 方法,网上搜索一番,发现实现转跳 ...

  4. Cloudera Certified Associate Administrator案例之Install篇

    Cloudera Certified Associate Administrator案例之Install篇 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.创建主机模板(为了给主 ...

  5. 安恒西湖论剑线下上午CTF部分题目WP

    简单的做了两个题,一道逆向,一道misc,其他题目,因为博主上课,时间不太够,复现时间也只有一天,后面的会慢慢补上 先说RE1,一道很简单的win32逆向,跟踪主函数,R或者TAB按几下, 根据esp ...

  6. javascript中 typeof和instanceof的区别

    <一> js中typeof的用法进行了详细的汇总介绍 (1)返回一个变量的基本类型 回顾基本类型(number,string,boolean,null,undefined,object) ...

  7. 树莓派安装C#运行环境

    一. 安装mono ARMv6(一代 Raspberry Pi B+) : http://yunpan.cn/cw6NYzXkD9kHq 访问密码 63ae ARMv7(二代 Raspberry Pi ...

  8. c和c++区别（未整理）

    学习完C语言和c++比较一下他们之间的区别: c++是c语言的基础上开发的一种面向对象的编程语言,应用十分广泛,按理说c++可以编译任何c的程序,但是两者还是有细微的差别. c++在c的基础上添加了类 ...

  9. MySQL 日期时间相关函数

    第一部分:时间差函数  timestampdiff.datediff.timediff 一.时间差函数:timestampdiff 语法:timestampdiff(interval, datetim ...

  10. PyInstaller库,打包成exe基本介绍

    一.pyinstaller简介 Python是一个脚本语言,被解释器解释执行.它的发布方式: .py文件:对于开源项目或者源码没那么重要的,直接提供源码,需要使用者自行安装Python并且安装依赖的各 ...