JS滚动

浏览数：27 / 时间：2015年06月09日

　　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;
    }
}

scrollHeight/scrollWidth

指元素内容的高度。不同浏览器下计算不一样，FF显示为元素的内容高度加上边框和滚动条的高度，IE下则还要加上容器margin值。与clientHeight比起来，增加了边框和滚动条的高度。

getScrollHeight:function(_elem){
    if(_elem){
        return _elem.scrollHeight;
    }else{
        return document.documentElement.scrollHeight || document.body.scrollHeight;
    }
}

offsetHeight/offsetWidth

指元素内容的高度，加上边框和滚动条的高度，如果有设置boder和滚动条的话。

getOffsetHeight:function(_elem){
    if(_elem){
        return _elem.offsetHeight;
    }else{
        return document.documentElement.offsetHeight || document.body.offsetHeight;
    }
}

案例：

.box{padding:10px;border:10px solid #ccc;line-height:100px;}

在FF下，.box的clientHeight,scrollHeight,offsetHeight的值为120,120,140
在chrome下，.box的clientHeight,scrollHeight,offsetHeight的值为120,120,140
在IE下，.box的clientHeight,scrollHeight,offsetHeight的值为120,120,140

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

JS滚动