前言
在看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赋值，获取真实的高度。
二、没了
。。。
1968
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
