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了
所以他两次拿到的高度是不一致的
那有同学会问
为什么原生的组件没这问题
原因就是我们开头说的
他原声的组件本身就不支持撑满全屏
他折叠和展开的这个高度
都是依赖里边
内容的真实的高度
所以没有问题
那具体我们想做成这种效果
应该怎么来实现哈
咱们下期继续来分享