晴明的博客园 GitHub      CodePen      CodeWars     

[js] 浏览器高度、滚动条相关

Element.scrollHeight

//是计量元素内容高度的只读属性， 包括overflow样式属性导致的视图中不可见内容。
//没有垂直滚动条的情况下， scrollHeight值与元素视图填充所有内容所需要的最小值clientHeight相同。
//包括元素的padding， 但不包括元素的margin.
//会对值四舍五入取整。 如果需要小数值， 使用Element.getBoundingClientRect()

Element.scrollTop

//可以设置或者获取一个元素距离他容器顶部的像素距离。
//一个元素的 scrollTop 可以计算出这个元素距离它容器顶部的可见高度。
//当一个元素的容器没有产生垂直方向的滚动条,那它的 scrollTop 的值默认为0。

var scrollLeft = document.documentElement.scrollLeft == 0 ? document.body.scrollLeft : document.documentElement.scrollLeft;
var scrollTop = document.documentElement.scrollTop == 0 ? document.body.scrollTop : document.documentElement.scrollTop;
//scrollLeft、scrollTop很不稳定，就算在firefox和chrome之间，也略有差别            
//var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;

 

window.scrollY、window.pageYOffset、Element.getBoundingClientRect()

            window.addEventListener("scroll", function(event) {
                var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
                console.log(scrollTop);
                console.log(window.scrollY); //返回文档在垂直方向已滚动的像素值。
                console.log(window.pageYOffset); //和window.scrollY是一样的
                console.log(document.documentElement.getBoundingClientRect());
//                返回元素的大小及其相对于视口的位置。
//                以顶点为起始点
//                ClientRect {
//                    bottom: x,距离bottom距离
//                    height: x,
//                    left: x,
//                    right: x,
//                    top: x,相对顶点Y， 一般是负数
//                    width: x
//                }
            });

 

window.innerHeight

//浏览器窗口的视口（viewport）高度（以像素为单位），如果存在水平滚动条，则包括它。

window.outerHeight

//获取整个浏览器窗口的高度（单位：像素），包括侧边栏（如果存在）、窗口镶边（window chrome）和窗口调正边框（window resizing borders/handles）。

 

Element.clientHeight

//返回元素内部的高度(单位像素)，包含内边距，但不包括水平滚动条、边框和外边距。
//clientHeight 可以通过 CSS height + CSS padding - 水平滚动条高度 (如果存在)来计算。

 

HTMLElement.offsetHeight

//是一个只读属性，它返回该元素的像素高度，高度包含该元素的垂直内边距和边框，且是一个整数。

 

height

            console.error(document.documentElement.style.height);//error
            console.error(document.body.style.height);//error
            console.error(d.height);//error
            console.error(d.style.height);//x px

 

 

#

getBoundingClientRect

rectObject = object.getBoundingClientRect();

Element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置。

 

 

#一种自适应布局

<!DOCTYPE html>
<html lang="zh">

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            html,
            body,
            ul,
            li {
                margin: 0;
                padding: 0;
                border: 0;
                list-style: none;
            }
            
            .fixed_container {
                position: fixed;
                top: 0;
                z-index: 99999;
                width: 100%;
                height: 100%;
                background-color: rgba(0, 0, 0, 0.3);
            }
            
            .absolute_container {
                position: absolute;
                top: 10%;
                left: 10%;
                width: 50%;
                height: 50%;
                background: lightblue;
                font-size: 4vw;
            }
            
            .scroll_container {
                overflow: auto;
            }
            
            .filling_container1 {
                height: 53px;
                padding: 10px;
            }
            
            .filling_container2 {
                box-sizing: border-box;
                height: 53px;
                margin: 10px;
            }
            
            .filling_container3 {
                box-sizing: border-box;
                height: 53px;
                border: 10px lightcoral solid;
            }
            
            .filling_container4 {
                box-sizing: border-box;
                height: 53px;
                padding: 10px;
                margin: 10px;
                border: 10px lightcoral solid;
            }
        </style>
    </head>

    <body>
        <div class="fixed_container">
            <div class="absolute_container">
                <h1 class="filling_container1">标题1</h1>
                <h2 class="filling_container2">标题2</h2>
                <p class="filling_container3">文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
                <p class="filling_container4">文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
                <h3 class="filling_container5">标题3</h3>
                <ul class="scroll_container">
                    <li>123</li>
                    <li>123</li>
                    <li>123</li>
                    <li>123</li>
                    <li>123</li>
                    <li>123</li>
                    <li>123</li>
                    <li>123</li>
                    <li>123</li>
                    <li>123</li>
                    <li>123</li>
            </div>

            </ul>
        </div>

        <script>
            //clientHeight不计算margin、border
            //            返回元素内部的高度(单位像素)，包含内边距，但不包括水平滚动条、边框和外边距。
            //border会挤占原本height的空间
            //border-box状态下,padding也会挤占原本height的空间
            var ch1 = document.querySelector(".filling_container1").clientHeight;
            console.log(ch1);
            var ch2 = document.querySelector(".filling_container2").clientHeight;
            console.log(ch2);
            var ch3 = document.querySelector(".filling_container3").clientHeight;
            console.log(ch3);
            var ch4 = document.querySelector(".filling_container4").clientHeight;
            console.log(ch4);
            var ch5 = document.querySelector(".filling_container5").clientHeight;
            console.log(ch5);            
            //offsetHeight是一种衡量标准，包括元素的边框、垂直内边距和元素的水平滚动条（如果存在且渲染的画）和元素的CSS高度。
            //实际测试获取不到border。border-box状态下，只获取本身高度。
            //选用offsetHeight尽量本身元素设置成box-sizing，或者不给元素设置margin，border
            var oh1 = document.querySelector(".filling_container1").offsetHeight;
            console.info(oh1);
            var oh2 = document.querySelector(".filling_container2").offsetHeight;
            console.log(oh2);
            var oh3 = document.querySelector(".filling_container3").offsetHeight;
            console.log(oh3);
            var oh4 = document.querySelector(".filling_container4").offsetHeight;
            console.log(oh4);
            var oh5 = document.querySelector(".filling_container5").offsetHeight;
            console.log(oh5);            
            //获取不到！
            var hh1 = document.querySelector(".filling_container1").style.height;
            console.info(hh1);
            var hh2 = document.querySelector(".filling_container2").style.height;
            console.log(hh2);
            var hh3 = document.querySelector(".filling_container3").style.height;
            console.log(hh3);
            var hh4 = document.querySelector(".filling_container4").style.height;
            console.log(hh4);
            document.querySelector(".scroll_container").style.height = (oh1 + oh2 + oh3 + oh4) + 'px';
        </script>
    </body>

</html>

 

posted @ 2016-02-25 17:01  晴明桑  阅读(371)  评论(0)  编辑  收藏  举报