如何获取隐藏div元素的高度

父级元素指定高设置超出部分为scroll 子元素超出父级元素的高将页面滚动条设置不显示现需求求出隐藏部分的高度
不用滚动条事件及相应的属性如何能获取到隐藏元素的高度

阅读 4.9k

使用Element.getBoundingClientRect()来获取相对于viewport的位置，
2个元素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">计算</button>
    </div>
    <script>
        document.querySelector(".calcButton").addEventListener("click",function(){
            var childWrapperRect=document.querySelector(".child-wrapper") .getBoundingClientRect();
            var childRect=document.querySelector(".child") .getBoundingClientRect();
            this.innerText="当前偏移-"+(childWrapperRect.top-childRect.top);
        });
    </script>
</body>
</html>

如何获取隐藏div元素的高度

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

为什么在谷歌浏览器中 'a' == ['a'] 返回 true？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

纯css如何绘制一个无背景色有边框色，带有文字的倒等腰梯形？

css布局怎么保证右边一直在可视范围内？