JS clientHeight,scrollHeight,offsetHeight,scrollTop,offsetTop概念
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.案例
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" Content="text/html; charset=utf-8;">
<title>JS滚动显示指定内容</title>
<meta name="author" content="rainna" />
<meta name="keywords" content="rainna's js lib" />
<meta name="description" content="js" />
<style>
*{padding:0;margin:0;} .m-cnt{width:600px;margin:0 auto;line-height:2;}
.m-cnt img{display:block;width:100%;}
.m-cnt .info{background:rgba(97, 207, 247, 0.5);line-height:80px;} .pos{position:fixed;top:0;width:600px;}
</style>
</head> <body>
<div class="m-cnt">
<p>JS滚动页面到某一位置时触发指定事件能够增强用户体验或是提高性能，其中使用最多的场景是加载更多，当鼠标滚动至页面下方时，自动加载下一页的内容。另一个常用的场景是当用户滚动至页面某一地方时，页面会给出提示或是将某些重要信息或按钮显示出来。实现这些效果的关键是要区分clientHeight、scrollHeight、offsetHeight属性的区别。刚好最近项目中有用到过这些概念，今天就抽空整理下关于这几个属性的区别。</p>
<p><strong>clientHeight/clientWidth</strong>:指元素可见区域的高度，容器的高度，不包括border和滚动条的高度。clientHeight与height值差不多，如果没有边框和滚动条的话，两者值相等，都是指容器的高度。火狐与IE下的值是一样的。</p>
<p><strong>offsetHeight/offsetWidth</strong>:指元素容器的高度，加上边框和滚动条的高度，如果有设置boder和滚动条的话。</p>
<p><strong>scrollHeight/scrollWidth</strong>:指元素内容的高度，而不是容器的高度。当元素内容的高度大于容器高度时，指元素内容的高度。</p>
<p><strong>offsetTop/offsetLeft</strong>:offsetTop:元素距离父元素顶端的距离。当前对象到其上级层顶部的间隔。<br />offsetLeft:元素距离父元素左侧的距离。当前对象到其上级层左侧的间隔。</p>
<p><strong>scrollTop/scrollLeft</strong>:scrollTop:元素中垂直滚动条滚动的距离。若元素中没有滚动条，则滚动距离为0。<br />scrollLeft:元素中水平滚动条滚动的距离。若元素中没有滚动条，则滚动距离为0。</p>
<p class="info" id="info">特殊显示的内容特殊显示的内容特殊显示的内容特殊显示的内容</p>
<p><img src="http://m2.img.srcdd.com/farm5/d/2014/1020/15/BC20A76398278107A49FFC5761F67587_B1280_1280_650_650.jpeg" /></p>
<p><img src="http://m3.img.srcdd.com/farm4/d/2014/1020/15/556E38E2D06F144114550AF1C699E60D_B1280_1280_650_650.jpeg" /></p>
<p><img src="http://m3.img.srcdd.com/farm4/d/2014/1020/15/390F43577E8994667B8CA1C178F90730_B1280_1280_650_650.jpeg" /></p>
</div>
<script>
var scroll = {
info:document.getElementById('info'), //获得元素的可视高度 容器高度，不包括滚动条和边框，不传参数表示浏览器窗口的可视高度
getClientHeight:function(_elem){
if(!!_elem){
return _elem.clientHeight;
}else{
return window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
}
},
//获得元素的可视高度 容器高度，包括滚动条和边框，不传参数表示浏览器窗口的可视高度
getOffsetHeight:function(_elem){
if(_elem){
return _elem.offsetHeight;
}else{
return document.documentElement.offsetHeight || document.body.offsetHeight;
}
},
//获得元素的内容高度，包括显示的内容和隐藏的内容，不传参数表示页面整个文档的高度
getScrollHeight:function(_elem){
if(_elem){
return _elem.scrollHeight;
}else{
return document.documentElement.scrollHeight || document.body.scrollHeight;
}
}, //获得元素距离父元素的顶端的距离
getOffsetTop:function(_elem){
return _elem.offsetTop;
},
//获得元素中滚动条纵向滚动的距离，不传参数表示浏览器滚动条的纵向滚动距离
getScrollTop:function(_elem){
if(!!_elem){
return _elem.scrollTop;
}else{
return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
}
},
//初始化
init:function(){
var that = this;
var _offsetTop = that.getOffsetTop(that.info);
document.body.addEventListener("mousewheel", function(event) {
that.info.className = that.getScrollTop() > _offsetTop ? 'info pos' : 'info';
});
}
} scroll.init();
</script>
</body>
</html>
JS clientHeight,scrollHeight,offsetHeight,scrollTop,offsetTop概念的更多相关文章
- js的offsetWidth,offsetHeight,offsetLeft,offsetTop
js的offsetWidth,offsetHeight,offsetLeft,offsetTop
- clientHeight , scrollHeight , offsetHeight之间的区别及兼容方案
clientHeight , scrollHeight , offsetHeight相信每个人都用过,可是每次用都要查一下到底哪个是文档大小哪个是视口大小,还有头疼的兼容问题. 先来官方的了解一下这三 ...
- clientHeight scrollHeight offsetHeight
<div style="height:200px;padding:10px;border:1px solid green;"></div> 对于上面的di ...
- height clientHeight scrollHeight offsetHeight的大致区别
这主要是针对火狐浏览器来讲的: height:就是div的高度,就是style中设置的高度:在chrome中clientHeight是包含padding的,offsetHeight和clientHei ...
- clientHeight—scrollHeight—offsetHeight三者的区别
clientHeight,scrollHeight,offsetHeight 这三个dom属性有时让人觉得相似但又不相似 以前对它们的理解也有一些模糊,现在总结一下,方便以后复习 clientHeig ...
- clientHeight / scrollHeight / offsetHeight 等属性的区别图
网页(内容)可见区域宽:document.body.clientWidth 网页(内容)可见区域高:document.body.clientHeight 即页面浏览器中可以看到内容的这个区域的高度,一 ...
- clientHeight , scrollHeight , offsetHeight之间的区别
clientHeight:元素客户区的大小,指的是元素内容及其边框所占据的空间大小(经过实践取出来的大多是视口大小) scrollHeight: 滚动大小,指的是包含滚动内容的元素大小(元素内容的总高 ...
- jquery 对象的 height、innerHeight、outerHeight 的区别以及DOM 元素的 clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop
前言:jquery 对象的 height.innerHeight.outerHeight,还有 DOM 元素的 clientHeight.offsetHeight.scrollHeight.offse ...
- offsetTop,offsetHeight,clientHeight,scrollHeight,scrollTop区别
这些高度相信很多同学都搞不清楚吧.这里我通过本地测试,发现了区别. 以聊天窗口为例. 元素(class='content')高度444px,其中上下padding分别是10px,margin为0.距离 ...
随机推荐
- android media server 解析1-media player service 结构部分
下面为media server注册的四个服务之一:MediaPlayerService的结构图 1.图中没有MediaPlayerService的代理对象BpMediaPlayerService部分, ...
- IOS之UI -- UITableView -- 1 -- 相关初识
*:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !important; } ...
- Effective Java 43 Return empty arrays or collections, not nulls
Feature Return empty arrays or collection Return nulls Avoids the expense of allocating the array N ...
- 通过代码实现gz压缩，并保持原来的文件名
写这篇博客主要是为了记录一下这两天来的研究成果-gz带原有文件名压缩.首先要说的是这个解决方案不是通过调用命令gzip来做的,而是通过java代码来实现的,其中用到了apache的common com ...
- MYSQL数据库函数集合
一.数学函数 ABS(x) 返回x的绝对值 BIN(x) 返回x的二进制(OCT返回八进制,HEX返回十六进制) CEILING(x) 返回大于x的最小整数值 EXP(x) 返回值e( ...
- 第八篇 ：微信公众平台开发实战Java版之如何网页授权获取用户基本信息
第一部分:微信授权获取基本信息的介绍 我们首先来看看官方的文档怎么说: 如果用户在微信客户端中访问第三方网页,公众号可以通过微信网页授权机制,来获取用户基本信息,进而实现业务逻辑. 关于网页授权回调域 ...
- hdu 1003 Max sum(简单DP)
Max Sum Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Problem ...
- 【MVC 4】7.SportsSore：完成购物车
作者:[美]Adam Freeman 来源:<精通ASP.NET MVC 4> 本文将继续构建 SportsStore 示例应用程序.在上一章中,添加了对购物车的基本支持,现在打 ...
- 边工作边刷题：70天一遍leetcode: day 74
Binary Tree Upside Down 要点: recursion反转如何做?两个要点,一是在递归之后反转link(因为先要通过原来的link到下一层),二是要一层层把最底层的root返回来. ...
- UESTC 915 方老师的分身II --最短路变形
即求从起点到终点至少走K条路的最短路径. 用两个变量来维护一个点的dis,u和e,u为当前点的编号,e为已经走过多少条边,w[u][e]表示到当前点,走过e条边的最短路径长度,因为是至少K条边,所以大 ...