JS滚动页面到某一位置时触发指定事件能够增强用户体验或是提高性能，其中使用最多的场景是加载更多，当鼠标滚动至页面下方时，自动加载下一页的内容。另一个常用的场景是当用户滚动至页面某一地方时，页面会给出提示或是将某些重要信息或按钮显示出来。实现这些效果的关键是要区分clientHeight、scrollHeight、offsetHeight等属性的区别。刚好最近项目中有用到过这些概念，今天就抽空整理下关于这几个属性的区别。
1.概念
clientHeight/clientWidth
指元素可见区域的高度，容器的高度，不包括border和滚动条的高度。clientHeight与height值差不多，如果没有边框和滚动条的话，两者值相等，都是指容器的高度。火狐与IE下的值是一样的。
//获得元素的可见区域高度 不传参数表示获取浏览器窗口的可视高度getClientHeight:function(_elem){ if(!!_elem){ return _elem.clientHeight; }else{ return window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; }}
offsetHeight/offsetWidth
指元素容器的高度，加上边框和滚动条的高度，如果有设置boder和滚动条的话。
getOffsetHeight:function(_elem){ if(_elem){ return _elem.offsetHeight; }else{ return document.documentElement.offsetHeight || document.body.offsetHeight; }}
scrollHeight/scrollWidth
指元素内容的高度，而不是容器的高度。当元素内容的高度大于容器高度时，指元素内容的高度。
getScrollHeight:function(_elem){ if(_elem){ return _elem.scrollHeight; }else{ return document.documentElement.scrollHeight || document.body.scrollHeight; }}
offsetTop/offsetLeft
offsetTop:元素距离父元素顶端的距离。当前对象到其上级层顶部的间隔。
offsetLeft:元素距离父元素左侧的距离。当前对象到其上级层左侧的间隔。
scrollTop/scrollLeft
scrollTop:元素中垂直滚动条滚动的距离。若元素中没有滚动条，则滚动距离为0。
scrollLeft:元素中水平滚动条滚动的距离。若元素中没有滚动条，则滚动距离为0。
2.案例
JS滚动显示指定内容 JS滚动页面到某一位置时触发指定事件能够增强用户体验或是提高性能，其中使用最多的场景是加载更多，当鼠标滚动至页面下方时，自动加载下一页的内容。另一个常用的场景是当用户滚动至页面某一地方时，页面会给出提示或是将某些重要信息或按钮显示出来。实现这些效果的关键是要区分clientHeight、scrollHeight、offsetHeight属性的区别。刚好最近项目中有用到过这些概念，今天就抽空整理下关于这几个属性的区别。
clientHeight/clientWidth:指元素可见区域的高度，容器的高度，不包括border和滚动条的高度。clientHeight与height值差不多，如果没有边框和滚动条的话，两者值相等，都是指容器的高度。火狐与IE下的值是一样的。
offsetHeight/offsetWidth:指元素容器的高度，加上边框和滚动条的高度，如果有设置boder和滚动条的话。
scrollHeight/scrollWidth:指元素内容的高度，而不是容器的高度。当元素内容的高度大于容器高度时，指元素内容的高度。
offsetTop/offsetLeft:offsetTop:元素距离父元素顶端的距离。当前对象到其上级层顶部的间隔。
offsetLeft:元素距离父元素左侧的距离。当前对象到其上级层左侧的间隔。scrollTop/scrollLeft:scrollTop:元素中垂直滚动条滚动的距离。若元素中没有滚动条，则滚动距离为0。
scrollLeft:元素中水平滚动条滚动的距离。若元素中没有滚动条，则滚动距离为0。特殊显示的内容特殊显示的内容特殊显示的内容特殊显示的内容
