clientHeight & scrollHeight & of

作者: 一颗脑袋 | 来源:发表于2018-10-16 15:23 被阅读0次

直接从字面上理解：

clientHeight即元素的可视高度。
scrollHeight即元素可滚动的高度。
offsetHeight我理解为元素占据的高度。

注意：理论上讲这三个值都没有真正表示元素的真实高度。
我们直接看一个例子：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Height & Top</title>
    </head>
    <body>
        <p id="p1" style="height: 20px;margin: 10px;padding: 20px;border: solid red 5px;background-color: yellow;overflow: auto;">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            padding-toppadding-topLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            padding-toppadding-top
        </p>
        <script type="text/javascript">
            var p1 = document.getElementById("p1");
            p1.onscroll=function(e){
                console.log("clientHeight:"+p1.clientHeight);
                console.log("scrollHeight:"+p1.scrollHeight);
                console.log("offsetHeight:"+p1.offsetHeight);
            }
        </script>
    </body>
</html>

效果是得到如下一个P元素：

根据标准盒子模型，它的内容高度height=20px，它的padding-top=20px,它的border-width=5px。
而我们想知道的三个值都是根据这些数据计算的，我们直接看结果：

所以clientHeight即元素可视高度是height + padding2得到的；
scrollHeight即可滚动高度是padding2 + 内容的真实高度；
offsetHeight即元素占据的空间高度是clientHeight + border-width*2。

其实到这里我们应该很清楚这三个属性之间的区别，但是为了谨慎起见，我们再参考一下官方文档描述：

clientHeight属性是只读属性，可是做元素可视高度。对于没有定义CSS或者内联布局盒子的元素为0，否则，它是元素内部的高度(单位像素)，包含内边距，但不包括水平滚动条、边框和外边距。clientHeight 可以通过 CSS height + CSS padding - 水平滚动条高度 (如果存在)来计算.
scrollHeight 这个只读属性是一个元素内容高度的度量，包括由于溢出导致的视图中不可见内容。

可以发现，对于clientHeight，除了水平滚动条存在时这个小细节，我们的理解没什么问题。

另外，clientTop & scrollTop & offsetTop这三个属性也存在让人辨别的含义，我们任然通过一个简单的例子来观察：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Height & Top</title>
    </head>
    <body>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p id="p1" style="height: 20px;margin: 10px;padding: 20px;border: solid red 5px;background-color: yellow;overflow: auto;">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            padding-toppadding-topLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            padding-toppadding-top
        </p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <script type="text/javascript">
            var p1 = document.getElementById("p1");
            window.onscroll=function(e){
                console.log("clientTop:"+p1.clientTop);
                console.log("scrollTop:"+p1.scrollTop);
                console.log("offsetTop:"+p1.offsetTop);
            }
        </script>
    </body>
</html>

我们直接来看结果：
由于scrollTop的特殊性，我们将结果分成p1滚动前和滚动后：

所以clientTop即上边框的宽度；
scrollTop即元素滚动后上方隐藏的高度；
offsetTop即元素上边框距浏览器顶部的高度。

运用一波：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>myWorkShow</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> 
    <style type="text/css">
        body{
            background-color: #5d4d4439;
        }
        #nav{
            background-color: #abc;
            position: fixed;
            width: 100%;
            top: 0px;
            box-shadow: 2px 2px 3px #aaaaaa;
            z-index: 1300;
        }
        #content{
            background-color: #5d4d4929;
            text-align: center;
            width: 70%;
            margin: 0 auto;
        }
        #about::before,#protfolio::before,#contact::before{
            content: "";
            display: block;
            height: 50px;
            width: 100%;
            position: static;
        }
        #about{
            width:100%;
        }
        #protfolio{
            width:100%;
        }
        #contact{
            width:100%;
        }
        #footer{
            background-color: #abc;
            width: 100%;
            box-shadow: 2px 2px 3px #aaaaaa;
            z-index: 1300;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="nav">
        <ul class="nav nav-pills">
          <li class="active"><a href="#about">ABOUT</a></li>
          <li><a href="#protfolio">PORTFOLIO</a></li>
          <li><a href="#contact">CONTACT</a></li>
        </ul>
    </div>

   <div id="content">
       <div id="about">
           <h2>This is about Content</h2>
           <p>This is about Content</p>
           <p>This is about Content</p>
           <p>This is about Content</p>
           <p>This is about Content</p>
           <p>This is about Content</p>
           <p>This is about Content</p>
           <p>This is about Content</p>
           <p>This is about Content</p>
           <p>This is about Content</p>
           <p>This is about Content</p>
           <p>This is about Content</p>
           <p>This is about Content</p>
           <p>This is about Content</p>
           <p>This is about Content</p>
           <p>This is about Content</p>
           <p>This is about Content</p>
           <p>This is about Content</p>
           <p>This is about Content</p>
           <p>This is about Content</p>
           <p>This is about Content</p>
           <p>This is about Content</p>
           <p>This is about Content</p>
           <p>This is about Content</p>
           <p>This is about Content</p>
           <p>This is about Content</p>
           <p>This is about Content</p>
           <p>This is about Content</p>
           <p>This is about Content</p>
           <p>This is about Content</p>
           <p>This is about Content</p>
           <p>This is about Content</p>
       </div>
       <hr/>
       <div id="protfolio">
           <h2>This is protfolio Content</h2>
           <p>This is about Content</p>
           <p>This is about Content</p>
           <p>This is about Content</p>
           <p>This is about Content</p>
           <p>This is about Content</p>
           <p>This is about Content</p>
           <p>This is about Content</p>
           <p>This is about Content</p>
           <p>This is about Content</p>
           <p>This is about Content</p>
           <p>This is about Content</p>
           <p>This is about Content</p>
           <p>This is about Content</p>
           <p>This is about Content</p>
           <p>This is about Content</p>
           <p>This is about Content</p>
           <p>This is about Content</p>
           <p>This is about Content</p>
           <p>This is about Content</p>
           <p>This is about Content</p>
           <p>This is about Content</p>
           <p>This is about Content</p>
           <p>This is about Content</p>
           <p>This is about Content</p>
           <p>This is about Content</p>
           <p>This is about Content</p>
       </div>
       <hr/>
       <div id="contact">
           <h2>This is contact Content</h2>
           <p>This is about Content</p>
           <p>This is about Content</p>
           <p>This is about Content</p>
           <p>This is about Content</p>
           <p>This is about Content</p>
           <p>This is about Content</p>
           <p>This is about Content</p>
           <p>This is about Content</p>
           <p>This is about Content</p>
           <p>This is about Content</p>
           <p>This is about Content</p>
           <p>This is about Content</p>
           <p>This is about Content</p>
           <p>This is about Content</p>
           <p>This is about Content</p>
           <p>This is about Content</p>
           <p>This is about Content</p>
           <p>This is about Content</p>
           <p>This is about Content</p>
           <p>This is about Content</p>
           <p>This is about Content</p>
           <p>This is about Content</p>
           <p>This is about Content</p>
           <p>This is about Content</p>
           <p>This is about Content</p>
           <p>This is about Content</p>
           <p>This is about Content</p>
           <p>This is about Content</p>
           <p>This is about Content</p>
           <p>This is about Content</p>
       </div>
       <hr/>
   </div>

    <footer id="footer">
        <h2>Dongoog © 2018. All Rights Reversed </h2>
    </footer>
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script type="text/javascript">
        $(function(){
            var $nav = $("#nav");
            var navList = $nav.find("li");

            for(var i = 0;i　< navList.length;i++){
                $(navList[i]).bind("click",function(e){
                    changeActive($(e.target));
                    document.documentElement.scrollTop += 50;
                });
            }

            var contentList = $("#content").find("div[id]");
            var arrTop = [];
            for(i=0;i < contentList.length;i++){
                arrTop[i] = contentList[i].offsetTop;
                $()
            }
            var scrollH = 0;
            //滚动时切换导航条
            window.addEventListener("scroll",function(e){
                scrollH = document.body.scrollTop || document.documentElement.scrollTop;
                for(i = 0;i < arrTop.length;i++){
                    if(i != arrTop.length-1){
                        if(scrollH >= arrTop[i] && scrollH < arrTop[i+1]){
                            changeActive($(navList[i]));
                            break;
                        }
                    }else{
                        if(scrollH >= arrTop[i]){
                            changeActive($(navList[i]));
                            break;
                        }
                    }
                }
            });

            function changeActive(target){
                for(i = 0;i　< navList.length;i++){
                    $(navList[i]).removeClass("active");
                }
                target.addClass("active");
            }
        });
    </script>
</body>
</html>

clientHeight & scrollHeight & of

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读