el.scrollHeight属性的理解

最新推荐文章于 2024-07-23 17:01:19 发布

yang1067155909

最新推荐文章于 2024-07-23 17:01:19 发布

阅读量2.1k

点赞数 1

文章标签： vue.js javascript html css

本文链接：https://blog.csdn.net/yang1067155909/article/details/120181540

版权

本文探讨了JavaScript中的`scrollHeight`属性，它表示元素的总高度，包括不可见部分，如因`overflow:hidden`而隐藏的内容和内边距。无论元素是否在视口内，`scrollHeight`始终返回元素的实际高度。示例代码展示了如何利用`scrollHeight`在动画过渡中控制元素高度。了解这一属性对于前端开发者来说，尤其在实现动态布局和隐藏/显示元素的交互时非常有用。

摘要由CSDN通过智能技术生成

前言

一、scrollHeight是什么？

二、没了

前言

在看iview的collaspse-transition组件实现时，发现有el.scrollHeight这个属性：

enter(el) {
    el.dataset.oldOverflow = el.style.overflow
    if (el.scrollHeight !== 0) {
      el.style.height = el.scrollHeight + 'px'
      el.style.paddingTop = el.dataset.oldPaddingTop
      el.style.paddingBottom = el.dataset.oldPaddingBottom
    } else {
      el.style.height = ''
      el.style.paddingTop = el.dataset.oldPaddingTop
      el.style.paddingBottom = el.dataset.oldPaddingBottom
    }

    el.style.overflow = 'hidden'
  },

上面代码主要通过设置overflow属性与style.height属性来控制元素的展示，其中具体思路我们不在本文分析，主要聊一下el.scrollHeight属性

提示：以下是本篇文章正文内容，下面案例可供参考

一、scrollHeight是什么？

scrollHeight指整个元素的高度，与元素本身有关，是元素本身的高度与你所设置的style属性相加的结果，但与overflow:hidden等属性无关，与是否在可视范围内无关。比如：

<body>
  <div id="ht" style="background-color: red;height:10px;">123</div>
  <script>
      let div = document.querySelector("#ht")
      console.log(div.scrollHeight, div.style.height)
  </script>
</body>

我们给元素的height设置为10px，此时打印的值，scrollHeight为元素真实的高度22，style.height为我们设置的10px。

再看添加了overflow与padding的情况：

  <body>
    <div id="ht" style="background-color: red;height:10px;overflow:hidden;padding-top:10px">123</div>
    <script>
        let div = document.querySelector("#ht")
        console.log(div.scrollHeight, div.style.height)
    </script>
  </body>

此时元素的高度为本身的22 + padding-top 撑起来的高度，共32，scrollHeight的值能正常打印。但因为我们设置了overflow:hidden，因此超出了style.height + padding-top = 20 高度的部分是看不到的，可以利用这一点来对元素进行显隐的展示，再进一步可以添加css3相关属性进行动态的高度变化展示，如前言中transition 组件实现的动态效果一样。想要恢复元素原本的高度时，即可利用scrollHeight重新给height赋值，获取真实的高度。