鍍金池/ 問(wèn)答/HTML5  HTML/ 如何獲取隱藏div元素的高度

如何獲取隱藏div元素的高度

父級(jí)元素指定高設(shè)置超出部分為scroll 子元素 超出父級(jí)元素的高 將頁(yè)面滾動(dòng)條設(shè)置不顯示 現(xiàn)需求求出隱藏部分的高度
不用 滾動(dòng)條事件及相應(yīng)的屬性如何能獲取到隱藏元素的高度

回答
編輯回答
笑浮塵

使用Element.getBoundingClientRect()來(lái)獲取相對(duì)于viewport的位置，
2個(gè)元素top位置的差就是偏移量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            padding: 0;
            margin: 0;
            width: 100vw;
            height: 100vh;
        }
        .container{
            position: absolute;
            left:10px;
            top:10px;
            width: 500px;
            height: 500px;
            background-color: #ffffff;
            box-sizing: border-box;
            border:1px solid #cccccc;

            overflow: hidden;
        }

        .child{
            width: 100%;
            height: 200%;
            background-color: red;
            border: 1px solid red;
            box-sizing: border-box;
        }

        .calcButton{
            position: absolute;
            left:0;
            bottom:0;
            width: 100px;
            height: 50px;
            box-sizing: border-box;
        }
        .child-wrapper{
            position: absolute;
            left:0;
            right: 0;
            top:0;
            bottom:50px;
            overflow-x: hidden;
            overflow-y: auto;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="child-wrapper">
            <div class="child"></div>
        </div>
        <button type="button" class="calcButton">計(jì)算</button>
    </div>
    <script>
        document.querySelector(".calcButton").addEventListener("click",function(){
            var childWrapperRect=document.querySelector(".child-wrapper") .getBoundingClientRect();
            var childRect=document.querySelector(".child") .getBoundingClientRect();
            this.innerText="當(dāng)前偏移-"+(childWrapperRect.top-childRect.top);
        });
    </script>
</body>
</html>
2018年6月14日 04:53
編輯回答
耍太極

拿segmentfault這個(gè)網(wǎng)頁(yè)來(lái)說(shuō)

document.body.offsetHeight
2018年3月24日 04:05
編輯回答
近義詞

表述不清，標(biāo)點(diǎn)符號(hào)都沒(méi)有！
鏈接描述
clipboard.png

2017年2月25日 00:45