//当前窗口的可视区域的高度的获取。
window.innerHeight //第一种获取方式
document.documentElement.clientHeight || document.body.clientHeight
//在IE7兼容模式下，用document.body.clientHeight获取，在其他用
// document.documentElement.clientHeight 获取。

//文档被卷曲的高度scrollTop
document.body.scrollTop

//内容区域偏移量offsetTop，这个存在兼容问题。不同的浏览器的理解是不相同的。

window.onload = function() {
   var viewH = document.documentElement.clientHeight || document.body.clientHeight;
  var content = document.getElementById('content');
  //content.offsetTop是固定的值是该元素的偏移量
  window.onscroll = function() {
  // 当窗口开始滚动时。
	var sTop = document.body.scrollTop ||document.documentElement.scrollTop;
	console.log(viewH+sTop);
	console.log(content.offsetTop);
	if ((viewH+sTop) > content.offsetTop ){
		alert('进入到可视区域内了');
	 }
  }
}

var rectWidth = rectObject.right - rectObject.left;
    rectHeight = rectObject.bottom - rectObject.top;

var  rectLeft = rectObject.left - document.documentElement.clientLeft || 2,
      rectRight = rectObject.right - document.documentElement.clientLeft || 2,
      rectBottom = rectObject.bottom - document.documentElement.clientTop || 2,
       rectTop = rectObject.top - document.documentElement.clientTop || 2,

window.onload = function() {
    var viewH = document.documentElement.clientHeight || document.body.clientHeight;
   var content = document.getElementById('content');
   window.onscroll = function() {
	var contentTop =content.getBoundingClientRect().top
//在滑动的过程中，这个元素的相对于浏览器窗口的位置一直在变化。
		if (contentTop <= viewH){
			alert('进入到可视区域内了');
		}
	}
}

function isVisible(ele) {
//兼容低版本浏览器
   var h= ele.getBoundingClientRect().bottom-ele.getBoundingClientRect().top;
//不兼容ie9及以下浏览器
  var h= ele.getBoundingClientRect().height;
if( h=== 0 ){
    alert('该元素不可见');
}else {
    alert('该元素可见');
}
}

var X= this.getBoundingClientRect().left+document.documentElement.scrollLeft;
var Y =this.getBoundingClientRect().top+document.documentElement.scrollTop;

{
top : (number)
bottom : (number)
left : (number)
right : (number)
width : (number)
height : (number)
}

var content = document.getElementById('content');
var span = document.getElementById('span');
span.onclick = function(event) {
	var mouseY = event.clientY;
	var objRectList = this.getClientRects();
	var len = objRectList.length;
	for (var i = 0; i < len; i++) {
//根据高度来判断点击了哪一行，这样我们就可以通过鼠标移入或者点击的坐标来决定卡片显示的位置
		if ((objRectList[i].top <= mouseY) && (mouseY<= objRectList[i].bottom)){
			alert('你点击了第' + (i+1) + '行');
		}
		
	}
}