scrollHeight为什么两次不一致
这个BUG好玩啊
一个小伙伴想把这个折叠面板呀
做成这种高度是撑满全屏的这种效果
但是呢
我们都知道这elementui里边原生这个效果
大家看他只能是自适应
他就没有这种
充满全屏的属性
所以呢他就想利用样式自己来实现
但是呢他写完的样式
大家看现在有这种抖动的效果
我们先不管他抖动的原因哈
我们今天探讨一个问题
就是这个小伙伴
在阅读源码的过程中发现啊
他这个折叠面板
在收起和展开的过程中
最大的高度不一致
什么意思呢就是
他折叠和展开的时候都是来控制
中间这个层的高度
但是呢大家看啊
我在收起的时候他是从163变成
但是我在展开呢
他是从0变成
主要这个动画是从0变到
最后显示效果可能一下就蹦到163了
所以先不管他
但是呢疑问就是
为什么这两次这个数值不一样
同同样一句获取高度的代码
el.scrollHeight
为什么他两次拿到的高度是不一致呢
为此呢
我给大家准备另一个简单的demo
特别简单
高度是两像素的一个层
然后是个背景颜色然后
overflow: hidden
我们来试一下获取这个层的
scrollHeight
我们选中它（这个.wrapper容器）
然后呢我们在这打印
scrollHeigth是2没问题对吧因为就是2吗
那注意我在这如果
把这里边写点内容
我就写两个吧：两行
我们再来打印
大家看 就变成45了
为什么呢
我们可以把它理解成
如果我们这个容器里边有滚动条这
滚动条能滚动的最大的范围
那为什么是
45呢
我们可以来检查一下这两个元素大家看
每一个都是22.5高度加一起正好是
比如说对于外部这个容器来说
它里边如果出现滚动条
最大可以滚动到45这个位置
那如果我现在把这个外部的容器
改大一点
比如改到
现在我在打印scrollHeight
他看就是200了
为什么
因为他外部容器就是高了
高到什么程度呢
如果我们高到百分之百
我们再看
他就是五百多了
这就是刚才我们这个展开的时候
去获取里边这个他的scrollHeight
它就是
那我们再折叠起来呢
他的高度就变成零了
我们再来
打印他的scrollHeight
大概就变成45了
所以他两次拿到的高度是不一致的
那有同学会问
为什么原生的组件没这问题
原因就是我们开头说的
他原声的组件本身就不支持撑满全屏
他折叠和展开的这个高度
都是依赖里边
内容的真实的高度
所以没有问题
那具体我们想做成这种效果
应该怎么来实现哈
咱们下期继续来分享
最后更新于