client(客户端),offset(偏移),scroll(滚动)
1.client系列
    clientTop 内容区域到边框顶部的距离 ，说白了，就是边框的高度
    clientLeft 内容区域到边框左部的距离，说白了,就是边框的宽度
    clientWidth 内容区域+左右padding   可视宽度
    clientHeight 内容区域+ 上下padding   可视高度
    例:
        <head>
            <meta charset="UTF-8">
            <title>Title</title>
            <style>
                .box{
                    width: 100px;
                    height: 100px;
                    border: 10px solid red;
                    padding: 50px;
                }
            </style>
        </head>
        <body>
        <div class="box">aaa</div>
        <script>
            oBox=document.getElementsByClassName('box')[0];
            console.log(oBox.clientTop);//10
            console.log(oBox.clientLeft);//10
            console.log(oBox.clientWidth);//200
            console.log(oBox.clientHeight)//200
        </script>
        </body>
2.屏幕的可视区域
<script type="text/javascript">
    // 屏幕的可视区域
    window.onload = function(){
        // document.documentElement 获取的是html标签
        console.log(document.documentElement.clientWidth);
        console.log(document.documentElement.clientHeight);
        // 窗口大小发生变化时，会调用此方法
        window.onresize = function(){
            console.log(document.documentElement.clientWidth);
            console.log(document.documentElement.clientHeight);
        }
    }
</script>
3.offset系列
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
        </style>
    </head>
    <body style="height: 2000px">
        <div>
            <div class="wrap" style=" width: 300px;height: 300px;position: relative">
                <div id="box" style="width: 200px;height: 200px;border: 5px solid red;position: absolute;top:50px;left: 30px;">
                </div>
            </div>
        </div>
    </body>
    <script type="text/javascript">
        window.onload = function(){
            var box = document.getElementById('box');
            /*
             offsetWidth占位宽  内容+padding+border
             offsetHeight占位高
             * offsetTop: 如果盒子没有设置定位 到body的顶部的距离,如果盒子设置定位，那么是以父辈为基准的top值
             * offsetLeft： 如果盒子没有设置定位 到body的左部的距离，如果盒子设置定位，那么是以父辈为基准的left值
             * */
            console.log(box.offsetTop);
            console.log(box.offsetLeft);
            console.log(box.offsetWidth);
            console.log(box.offsetHeight);
        }
    </script>
4.scroll系列
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{padding: 0;margin: 0;}
        </style>
    </head>
    <body style="width: 2000px;height: 2000px;">
        <div style="height: 200px;"></div>
        <div style="height: 200px;"></div>
        <div style="height: 200px;"></div>
        <div style="height: 200px;"></div>
        <div style="height: 200px;"></div>
        <div id = 'scroll' style="width: 200px;height: 200px;border: 1px solid red;overflow: auto;padding: 10px;margin: 5px 0px 0px 0px;">
            <p>大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅
                度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发
                热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大
                幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度
                发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热
                大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅
                度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发
                热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大
            </p>
        </div>
    </body>
    <script type="text/javascript">
        window.onload = function(){
            //实施监听滚动事件
            window.onscroll = function(){
               console.log(1111);
               //页面向上卷起的高度
               console.log('上'+document.documentElement.scrollTop);
               //页面左侧卷起的高度
               console.log('左'+document.documentElement.scrollLeft);
               //宽度 包括内容 padding 边框
               console.log('宽'+document.documentElement.scrollWidth);
               //高度 包括内容 padding 边框
               console.log('高'+document.documentElement.scrollHeight)
            };
                // 页面中的其他部分也可以做滚动监听事件
            var s = document.getElementById('scroll');
            s.onscroll = function(){
    //        scrollHeight : 内容的高度+padding 边框
                console.log('上'+s.scrollTop);
                console.log('左'+s.scrollLeft);
                console.log('宽'+s.scrollWidth);
                console.log('高'+s.scrollHeight);
            }
        }
    </script>
5.固定导航栏实例:
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            *{
                margin: 0;
                padding : 0;
            }
            .top{
                width: 100%;
                height: 80px;

            }
            .content{
                width: 100%;
                height: 1000px;
                background-color: gold;
                /*position: relative;*/
            }
            .input{
                width: 350px;
                height: 60px;
                background-color: #fff;
                position: absolute;
                top: 150px;
                left: 40%;
            }
            .down{
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100px;
                z-index: 1000;
                background-color: saddlebrown;
                display: none;
            }
        </style>
    </head>
    <body>
    <div class="top"></div>
    <div class="content">
        <div class="input"></div>
    </div>
    <div class="down"></div>
    <script>
        window.onload=function(){
            oInput=document.getElementsByClassName('input')[0];
            oDowm=document.getElementsByClassName('down')[0];
            fromtop=oInput.offsetTop;
            console.log(fromtop);
            window.onscroll=function(){
                var othertop=document.documentElement.scrollTop;
                // console.log(othertop);
                if(othertop>=fromtop){
                    oDowm.style.display='block';
                }else{
                    oDowm.style.display='none';
                }
            };
        }
    </script>
    </body>

client,offset,scroll系列的更多相关文章

  1. client , offset , scroll 系列 及百度导航栏案例

    1. client 系列 示例 : <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...

  2. DOM盒模型和位置 client offset scroll 和滚动的关系

    DOM盒模型和位置 client offset scroll 和滚动的关系 概览 在dom里面有几个描述盒子位置信息的值, pading border margin width height clie ...

  3. client offset scroll 之间的区别

    一.client 属性 值 clientWidth 元素被设置的宽度 + padding左右内间距 clientHeight 元素被设置的高度 + padding上下内间距 clientLeft 左 ...

  4. JavaScript概念之screen/client/offset/scroll/inner/avail的width/left 分类： JavaScript HTML+CSS 2015-05-27 16:42 635人阅读 评论(0) 收藏

    原文地址:http://caibaojian.com/js-name.html JS中获取各种宽度和距离,常常让我们混淆,各种浏览器的不兼容让我们很头疼,现在就在说说js中有哪些宽度和距离. 1.名词 ...

  5. JS中client/offset/scroll等的宽高解析

    原文地址:→传送门 window相关宽高属性 1. window.outerHeight (窗口的外层的高度) / window.outerWidth (窗口的外层的宽度) window.outerH ...

  6. JS-特效 ～ 04. client对象、网页可视区域的宽高、client / offset / scroll 三大家族的区别、冒泡事件、事件委托、获取内嵌式和外链式属性getStyle（ele，attr） ；、缓动动画封装

    知识点: 模拟滚动条的解除事件问题 : event内置对象,包含 了大量事件: page兼容性: pageX || clientX + scool().top  : if (true === a)tr ...

  7. JavaScript位置:window&client&offset&scroll&MouseEvent&getBoundingClientRect&计算任意元素滚动条宽度

    Window: window.innerWidth:浏览器viewport视口宽,包括垂直滚动条 window.innerHeight:浏览器视口高,包括水平滚动条 window.outerWidth ...

  8. 差别client、offset、scroll系列以及event的几个距离属性

    element元素结点属性 一. offset系列 1.offsetWidth 和offsetHeight element.offsetWidth是一个仅仅读属性,它包含了: css width + ...

  9. 区别client、offset、scroll系列以及event的几个距离属性

    element元素结点属性 一. offset系列 1.offsetWidth 和offsetHeight element.offsetWidth是一个只读属性,它包括了: css width + p ...

随机推荐

  1. C++基础之字符数组和字符串

    无意中发现了一个非常有意思的技术类型小品文系列,通过大牛指导菜鸟的方式,解说讲C++知识,有的非常基础却是开发中easy忽略的地方. [Elminster的专栏] http://blog.csdn.n ...

  2. 不安装 oracle的客户，就可以使用pl/sql访问远程oracle 数据库的方法

    免安装Oracle客户端使用PL/SQL连接Oracle      大家都知道,用PL/SQL连接Oracle,是需要安装Oracle客户端软件的.有没要想过不安装Oracle客户端直接连接Oracl ...

  3. CUDA中的常量内存__constant__

    GPU包含数百个数学计算单元,具有强大的处理运算能力,可以强大到计算速率高于输入数据的速率,即充分利用带宽,满负荷向GPU传输数据还不够它计算的.CUDA C除全局内存和共享内存外,还支持常量内存,常 ...

  4. OpenGL（六） gluLookAt和gluPerspective函数解析

    在调用gluLookAt和gluPerspective函数之前一般要先调用一下glLoadIdentity函数,先说一下这个函数是做什么的. glLoadIdentity glLoadIdentity ...

  5. （记录）mysql分页查询，参数化过程的坑

    在最近的工作中,由于历史遗留,一个分页查询没有参数化,被查出来有sql注入危险,所以对这个查询进行了参数化修改. 一看不知道,看了吓一跳,可能由于种种原因,分页查询sql是在存储过程中拼接出来的,wh ...

  6. WPF 呼吸灯特效

    原文:WPF 呼吸灯特效 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/u014117094/article/details/46738621 pa ...

  7. AntDesign Form表单字段校验的三种方式

    1.使用getFieldDecorator的rules规则 最简单的方法就是使用getFieldDecorator中的rules验证.rules中定义校验规则,message为校验不通过时的提示文字. ...

  8. centos6.5安装apache2.x并更改默认80port

    因为现在nginx它已成为反向代理软件的主流.因此,linuxserver在系统.我们几乎总是安装nginx东方的,这使在同一时间使用apache带来了麻烦.因为apache它用于通过缺省80port ...

  9. DOS符号转义（转 http://www.robvanderwoude.com/escapechars.php）

    Escape Characters Character to be escaped Escape Sequence Remark % %% May not always be required in ...

  10. 海洋cms 模板标签手册

    海洋cms采用极其简单易用的模板技术,所有标签直接调用接口,无需复杂的编码技术,让你对界面设计得心应手,请认真阅读本文档,妥善收藏. ========= 目录 =========00.相关必要说明01 ...