前言

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

enter(el) {el.dataset.oldOverflow = el.style.overflowif (el.scrollHeight !== 0) {el.style.height = el.scrollHeight + 'px'el.style.paddingTop = el.dataset.oldPaddingTopel.style.paddingBottom = el.dataset.oldPaddingBottom} else {el.style.height = ''el.style.paddingTop = el.dataset.oldPaddingTopel.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赋值，获取真实的高度。

二、没了

。。。

el.scrollHeight属性的理解相关推荐

[html] 说说你对HTML5中pattern属性的理解
[html] 说说你对HTML5中pattern属性的理解好像是判断input在输入时按下tab键跳转到下一个input的优先级个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚 ...
[html] 说说你对属性data-的理解
[html] 说说你对属性data-的理解 data- 属性是H5新增的自定义属性,也可以用来存储值.我个人用的不多,这个data- 属性倒是和vue中的v-bind 功能相似, 自定义属性,绑定数据 ...
[html] 谈谈你对input元素中readonly和disabled属性的理解
[html] 谈谈你对input元素中readonly和disabled属性的理解相同点:都会使文本框变成只读,不可编辑.不同点:1.disabled属性在将input文本框变成只读不可编辑的同时, ...
[vue] 说说你对选项el,template,render的理解
[vue] 说说你对选项el,template,render的理解 el: 把当前实例挂载在元素上 template: 实例模版, 可以是.vue中的template, 也可以是template选项, ...
[css] 说说你对css的will-change属性的理解，它有什么作用呢？
[css] 说说你对css的will-change属性的理解,它有什么作用呢? 告诉浏览器,这个元素的某些属性可能会频繁变动触发回流,要求浏览器给予资源进行优化,一般浏览器会给这个元素单独生成一个图层 ...
[css] 举例说说你对white-space属性的理解
[css] 举例说说你对white-space属性的理解值说明 normal 默认.空白会被浏览器忽略. pre 空白会被浏览器保留.其行为方式类似 HTML 中的 <pre> 标签. ...
BOM部分属性及理解
BOM部分属性及理解 BOM称之为浏览器对象模型.里面主要是我们和浏览器进行交互的方法. 是由IE3.0和Netscape Navigator3.0(网景)提供的一种新的特性,主要是用来通过JS这门脚 ...
html clear属性值,clear属性有哪些属性值 CSS clear属性的理解.
CSS clear是什么属性... 语法: clear : none | left |right | both 参数: none : 允许两边都可以有浮动对象 both : 不允许有浮动对象 left ...
Android入门：对图片 ImageView的scaleType属性的理解
关于ImageView的scaleType属性的理解问题:图片在不同机型上的显示大小不同 1.android:scaleType="center" 保持原图的大小,显示在Imag ...

el.scrollHeight属性的理解

前言

一、scrollHeight是什么？

二、没了

el.scrollHeight属性的理解相关推荐

最新文章

热门文章