一、各种高度

　　1、scrollTop：　　上方隐藏文本高度；

　　　  屏幕右侧滚轮滑动的高度：document.body.scrollTop，

　　2、scrollHeight：  全部内容的高度+上下padding；

　　　  滑轮滑到最底端时：scrollTop + 当前Windows窗口的高度 = scrollHeight，

　　　  当前窗口的高度：document.documentElement.clientHeight，　　　  

　　3、clientTop：　　当前对象可视区域到上一级距离（通常为当前对象上边框的宽度）；

　　4、clientHeight：   当前对象高度+上下padding（可视区域=界面高度+下padding）；

　　5、offsetParent：  上一个含position属性的父类标签，没有符合条件的就是body，

　　　  offsetTop：　　 到offsetParent的距离，子margin+区间内容高度+父padding，不含边框；

　　6、offsetHeight：   当前对象高度+上下padding+上下边框；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>scrollHeight</title>
</head>
<body style="margin:0;padding:0;border:3px solid red;">

    <div style="margin:50px;">
        <div id="s0" style="border:2px solid blue;margin:3px;padding:10px;" >
            <div>e</div>
            <div id="s1" style="width:400px;height:300px;overflow:auto; border:1px solid red;margin:5px;padding:6px;">
                <div>1</div><div>1</div><div>1</div><div>1</div><div>1</div><div>1</div>
                <div>1</div><div>1</div><div>1</div><div>1</div><div>1</div><div>1</div>
                <div>1</div><div>1</div><div>1</div><div>1</div><div>1</div><div>1</div>
                <div>1</div><div>1</div><div>1</div><div>1</div><div>1</div><div>1</div>
                <div>1</div><div>1</div><div>1</div><div>1</div><div>1</div><div>1</div>
                <div>1</div><div>1</div><div>1</div><div>1</div><div>1</div><div>1</div>
                <div>1</div><div>1</div><div>1</div><div>1</div><div>1</div><div>1</div>
                <div>1</div><div>1</div><div>1</div><div>1</div><div>1</div><div>1</div>
                <div>1</div><div>1</div><div>1</div><div>1</div><div>1</div><div>1</div>
                <div>1</div><div>1</div><div>1</div><div>1</div><div>1</div><div>1</div>
                <div>1</div><div>1</div><div>1</div><div>1</div><div>1</div><div>1</div>
                <div>1</div><div>1</div><div>1</div><div>1</div><div>1</div><div>1</div>
                <div>1</div><div>1</div><div>1</div><div>1</div><div>1</div><div>1</div>
                <div>1</div><div>1</div><div>1</div><div>1</div><div>1</div><div>1</div>
            </div>
        </div>
    </div>
    <script>
        var n = document.getElementById("s1");
        //console.log(s1.scrollTop);        //上方隐藏文本高度
        //console.log(s1.scrollHeight);     //全体文本高度+上下padding
        //console.log(s1.clientTop);        //可视区域到上一级距离（通常为上边框的宽度）
        //console.log(s1.clientHeight);     //界面高度+上下padding（可视区域=界面高度+下padding）
        console.log(s1.offsetParent);       //上一个含position属性的父类标签，没有符合条件的就是body，
        console.log(s1.offsetTop);          //到offsetParent的距离，子margin+区间内容高度+父padding，不含边框
        //console.log(s1.offsetHeight);       //界面高度+上下padding+上下边框

    </script>
</body>
</html>
View Code

 二、滚动条

 实现效果：页面段落自动目录导航提示，重点应用上面的各种高度计算、

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>huadongyemian</title>
    <style>
        body{
            margin:0;
        }
        ul{
            list-style:none;
        }
        .title{
            height:48px;
            width:100%;
            background-color:#363636;
            color:white;
            position:fixed;
            text-align:center;
            line-height:48px;
            font-size:30px;
        }
        .pg-body{
            width:980px;
            margin:0 auto;
        }
        .menu{
            width:130px;
            background-color:pink;
            float:left;
            margin-top:48px;
            position:fixed;
        }
        .content{
            width:840px;
            float:right;
            margin-top:48px;
            overflow:auto;
        }
        .content .c{
            height:400px;
            border:1px solid red;
        }
        .active{
            background-color:#BBBBBB;
        }
    </style>
</head>
<body onscroll="Foo();">
    <div class="title" id="top">
        滚动页面分段导航
    </div>
    <div class="pg-body">
        <div class="menu">
            <ul id="menuText">
                <li class="active">第一章</li>
                <li>第二章</li>
                <li>第三章</li>
                <li>第四章</li>
                <li>第五章</li>
            </ul>
        </div>
        <div class="content" id="contentText">
            <div class="c">第一章</div>
            <div class="c">第二章</div>
            <div class="c">第三章</div>
            <div class="c">第四章</div>
            <div class="c" style="height:100px;" >第五章</div>
        </div>
    </div>

    <script>
        function Foo(){
            var scrollTop = document.body.scrollTop;
            var topFix = document.getElementById("top").offsetHeight;
            var textList = document.getElementById("contentText").children;
            var menuList = document.getElementById("menuText").children;
            for(var i=0;i<textList.length;i++){
                var topToBody = textList[i].offsetTop + textList[i].offsetParent.offsetTop;
                var bottomToBody = topToBody + textList[i].offsetHeight;
                if(topToBody < (scrollTop+topFix) && (scrollTop+topFix) < bottomToBody){
                    for(var j=0;j<menuList.length;j++){
                        if(j==i){
                            menuList[j].classList.add("active");
                        }else{
                            menuList[j].classList.remove("active");
                        };
                    };
                break;
                };
            };
            //最后一章的显示
            var winHeight = document.documentElement.clientHeight;
            var bodyHeight = document.body.scrollHeight;
            if(Math.ceil(winHeight+scrollTop) >= bodyHeight){
                for(var i=0;i<menuList.length;i++){
                    if(textList[i].offsetTop>(scrollTop+topFix)){
                        menuList[i].classList.add("active");
                    }else{
                        menuList[i].classList.remove("active");
                    };
                };
            };
        };
    </script>
</body>
</html>
View Code