页面元素可视区域内判定 - 推酷
页面元素可视区域内判定
检测页面元素是否在浏览器可视区域是一个非常实用的功能，该功能是实现图片懒加载和瀑布流布局的关键技术之一。该功能主要是解决页面元素的定位问题，当元素出现在可视区域内的时候再对元素进行资源异步加载，大大提升了页面的性能，更是缓解了服务器端的压力。举个简单的例子，像天猫、京东等电商页面往往会有很多图片，如果每次都把整个页面涉及到的资源一下子都加载进来，不仅服务器承受更多的请求压力，页面的加载速度也会慢好多，这就意味着用户等待的时间就越长，那么用户下次再光临该网站的概率就会降低，这是绝对不能容忍的。本文，主要介绍了一种页面可视区域判定的方法（考虑使用场景，就针对垂直方向判定了），并利用
框架实现了一个简单demo。
CSSOM （CSS Object Model View）定义了各种视图API，以方便前端编程人员进行各种视图上的操作。
对这些视图API进行了详细的整理，并给出了各API的兼容性测试结果，非常赞。整体看下来，视图API有以下5大类：
Window视图属性：浏览器窗体相关信息
Screen视图属性：显示器相关信息
文档视图和元素视图方法：提供了4个视图相关的方法
元素视图属性：元素大小位置信息
鼠标位置：鼠标位置相关信息
本文主要关心Window视图下的 innerHeight 和 pageYOffset 属性，元素视图下的 clientHeight 和 offsetTop 属性。
下图展示了IE9下某些属性的测量标准：
innerHeight、pageYOffset
1. innerHeight：浏览器窗口的视口（viewport）高度（以像素为单位）
IE8以下不支持该属性，可用KISSY框架中的 viewportHeight() 方法获取
2. pageYOffset：文档在垂直方向已滚动的像素值，该属性是 scrollY 的别名，但兼容性更好点
IE8以下不支持该属性，可由KISSY框架中的 scrollTop() 方法获取
clientHeight、offsetTop
1. clientHeight：元素内部的高度(单位像数)，包含内边距，但不包括水平滚动条、边框和外边距
该属性兼容性很好，可由KISSY框架中的 innerHeight() 方法获取
2. offsetTop：相对于最近的祖先（ offsetParent ）定位元素（CSS position属性被设置为 relative 、 absolute 或 fixed 的元素）的高度偏移值
判定元素是否在可视区域，获取元素相对于页面文档左上角的偏移值更有意义，利用该属性的特性，我们可用下面的代码获取该元素相对于页面左上角的偏移信息：
// 获取元素文档偏移值
function getElementTopLeft(obj) {
var top = 0;
var left = 0;
while(obj){
top += obj.offsetT
left += obj.offsetL
obj = obj.offsetP
return {top:top,left:left};
上面的代码基本满足需求，也可由KISSY框架提供的 offset() 函数获取元素偏移信息
可视区域判定规则
了解上面的四个基本视图属性后，判定一个元素是否在可视区域中就容易多了，只要保证滑动条既不能下滑太多，又不能下滑太少即可：
条件一：防止滚动条向下滑的太多
// 原生js实现
// 元素的上偏移值+元素的内部高度&浏览器窗口竖直方向滑动值
getElementTopLeft(el).top + el.clientHeight&window.pageYOffset
条件二：防止滚动条向下滑地太少
// 原生js实现
// 浏览器窗口竖直方向滑动值+浏览器视口高度&元素的上偏移值
window.pageYOffset+window.innerHeight&getElementTopLeft(el).top
考虑兼容性和函数的节流，利用KISSY框架实现的demo如下：
&!DOCTYPE html&
&html lang=&en&&
&meta charset=&UTF-8&&
&title&lazyload&/title&
* { margin: 0; padding: 0; }
background-color:
height: 100
height: 1000
background-color:
width: 200
height: 200
border: 10
width: 100
height: 100
border: 10
&div class=&header&&&/div&
&div class=&occupy&&&/div&
&div class=&parent&&
&div class=&child&&&/div&
&script src=&/kissy/k/1.4.10/seed-min.js& data-config=&{combine:true}&&&/script&
KISSY.use('dom, event', function(S, D, E) {
// 获取判定元素
var child = D.get('.child');
// child元素相对于文档左上角的偏移
var offset = D.offset(child);
// child元素可视区域高度，不包括滚动条、边框和外边距
var clientHeight = D.innerHeight(child);
// window.innerHeight 视窗高度
var viewportHeight = D.viewportHeight();
// 函数节流
var _scroll = S.throttle(function() {
var scrollTop = D.scrollTop(this);
if ((offset.top + clientHeight) & scrollTop
&& (scrollTop + viewportHeight) & offset.top) {
console.log('进入可视区域');
// 滚动事件***
E.on(window, 'scroll', _scroll);
依据需求，上述所选的视图属性可以做适当的修改，以满足更高的精度需求。弄明白各种视图属性还是挺闹心的，但是静下心来慢慢捣鼓，还是非常有收获的！
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致&所谓可视区域是指能看得见的区域，即在浏览器中能看到页面的区域（高度与宽度）。刚刚使用&document.body.clientHeight&来获取可视区域的高度得到的却是整个文档的高度，然后在的一篇文章中获知需要通过&document.documentElement.clientHeight&才能获取到浏览器的可视区域的高度，顺便将该文章摘下来，如下：
在没有声明DOCTYPE的IE中，浏览器显示窗口大小只能以下获取：
document.body.offsetWidth
document.body.offsetHeight
&&&&&&&&在声明了DOCTYPE的浏览器中，可以用以下来获取浏览器显示窗口大小：
document.documentElement.clientWidth
document.documentElement.clientHeight
&&&&&&&&IE，FF，Safari皆支持该方法，opera虽支持该属性，但是返回的是页面尺寸；
&&&&&&&&同时，除了IE以外的所有浏览器都将此信息保存在window对象中，可以用以下获取：
window.innerWidth
window.innerHeight
网页可见区域宽： document.body.clientW 网页可见区域高： document.body.clientH 网页可见区域高： document.body.offsetW
//包括边线的宽网页可见区域高： document.body.offsetH //包括边线的宽网页正文全文宽： document.body.scrollW 网页正文全文高： document.body.scrollH 网页被卷去的高： document.body.scrollT网页被卷去的左： document.body.scrollL网页正文部分上： window.screenT 网页正文部分左： window.screenL 屏幕分辨率的高： window.screen.屏幕分辨率的宽： window.screen.屏幕可用工作区高度： window.screen.availH 屏幕可用工作区宽度： window.screen.availWclientX 设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条。
clientY 设置或获取鼠标指针位置相对于窗口客户区域的 y 坐标，其中客户区域不包括窗口自身的控件和滚动条。
offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。
offsetY 设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标。
screenX 设置或获取获取鼠标指针位置相对于用户屏幕的 x 坐标。
screenY 设置或获取鼠标指针位置相对于用户屏幕的 y 坐标。
x 设置或获取鼠标指针位置相对于父文档的 x 像素坐标。
y 设置或获取鼠标指针位置相对于父文档的 y 像素坐标。
阅读(...) 评论()