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概念的更多相关文章

  1. js的offsetWidth,offsetHeight,offsetLeft,offsetTop

    js的offsetWidth,offsetHeight,offsetLeft,offsetTop

  2. clientHeight , scrollHeight , offsetHeight之间的区别及兼容方案

    clientHeight , scrollHeight , offsetHeight相信每个人都用过,可是每次用都要查一下到底哪个是文档大小哪个是视口大小,还有头疼的兼容问题. 先来官方的了解一下这三 ...

  3. clientHeight scrollHeight offsetHeight

    <div  style="height:200px;padding:10px;border:1px solid green;"></div> 对于上面的di ...

  4. height clientHeight scrollHeight offsetHeight的大致区别

    这主要是针对火狐浏览器来讲的: height:就是div的高度,就是style中设置的高度:在chrome中clientHeight是包含padding的,offsetHeight和clientHei ...

  5. clientHeight—scrollHeight—offsetHeight三者的区别

    clientHeight,scrollHeight,offsetHeight 这三个dom属性有时让人觉得相似但又不相似 以前对它们的理解也有一些模糊,现在总结一下,方便以后复习 clientHeig ...

  6. clientHeight / scrollHeight / offsetHeight 等属性的区别图

    网页(内容)可见区域宽:document.body.clientWidth 网页(内容)可见区域高:document.body.clientHeight 即页面浏览器中可以看到内容的这个区域的高度,一 ...

  7. clientHeight , scrollHeight , offsetHeight之间的区别

    clientHeight:元素客户区的大小,指的是元素内容及其边框所占据的空间大小(经过实践取出来的大多是视口大小) scrollHeight: 滚动大小,指的是包含滚动内容的元素大小(元素内容的总高 ...

  8. jquery 对象的 height、innerHeight、outerHeight 的区别以及DOM 元素的 clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop

    前言:jquery 对象的 height.innerHeight.outerHeight,还有 DOM 元素的 clientHeight.offsetHeight.scrollHeight.offse ...

  9. offsetTop,offsetHeight,clientHeight,scrollHeight,scrollTop区别

    这些高度相信很多同学都搞不清楚吧.这里我通过本地测试,发现了区别. 以聊天窗口为例. 元素(class='content')高度444px,其中上下padding分别是10px,margin为0.距离 ...

随机推荐

  1. iOS支付宝集成时遇到的问题整理（2）

    1.集成支付宝SDK编译报错#include<openssl/asn1.h>这一行  “openssl/asn1.h”file not found 解决方法:在BuildSetting 里 ...

  2. android network develop(2)----network status check

    Check & Get network status Normally, there will be two type with phone network: wifi & mobil ...

  3. node.js之excel文件读取

    金天:学习一个新东西,就要持有拥抱的心态,如果固守在自己先前的概念体系,就会有举步维艰的感觉.node.js解析excel, 读取记录. 业务需求,从excel (xlsx, xls)导入数据. 备选 ...

  4. PS网页设计教程XXX——在PS中创建一个漫画书主题网页布局

    作为编码者,美工基础是偏弱的.我们可以参考一些成熟的网页PS教程,提高自身的设计能力.套用一句话,“熟读唐诗三百首,不会作诗也会吟”. 本系列的教程来源于网上的PS教程,都是国外的,全英文的.本人尝试 ...

  5. WIN7下VPN服务器的建立 我又在给自己挖坑了。。。

    先说一下为什么会有这篇文章吧,和同学们玩局域网对战游戏一般都会用各种游戏对战平台,比如浩方之类的.但是用过这类东西的人都知道,抢房间.高延迟等等问题也是很麻烦的.于是我一个同学下了个VPN软件,但是与 ...

  6. VS2010 调试窗口一闪而过解决方法

    若此时进行的操作是编译(F5),可先运行程序(Ctrl+F5),若仍然一闪而过,用下面方法解决. 方法一: 1.要有头文件cstdlib,在程序最后写一句(return之前)添加:system(&qu ...

  7. hdu 2583 permutation

    permutation Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Tota ...

  8. c++ Windows Socket实现最简单的C/S网络通信（TCP）

    1.服务器端代码: #include<iostream> #include<WinSock2.h> #pragma comment(lib, "ws2_32.lib& ...

  9. 【学习/研发】嵌入式Linux/Android开发有它就够了——迅为4412开发板

    网站:http://www.topeetboard.com 光盘资料+网盘资料+配套视频+售后支持,助您加速学习研发的进程 产品介绍 iTOP-Exynos4412开发板采用 Exynos4412的主 ...

  10. 同时屏蔽ios和android下点击元素时出现的阴影

    在ios4+和android2+系统,当手指触摸屏幕a标签链接或按钮时,会产生不同的效果,对于ios点击元素的时候,就会出现一个半透明的灰色背景:对于android则出现红色的边框.对这2个系统自带的 ...