子节点缩放后如何更新父元素的scrollWidth与scrollHeight？

问题原因 #

你遇到的是CSS transform 的标准特性导致的差异：transform: scale 只会修改元素的视觉渲染效果，不会改变元素在布局流中占用的真实盒模型尺寸。父容器的 scrollWidth、scrollHeight 是基于子元素的原始布局尺寸计算的，和缩放后的视觉尺寸无关，你观察到的水平滚动条消失属于不同浏览器的实现差异，并非标准预期行为。

可行解决方案 #

纯CSS方案

• 如果你不需要动态调整缩放比例，直接放弃使用 transform: scale，改为直接修改子元素的宽高属性：将原本 height: 200px; width: 200px 改为 height: 100px; width: 100px 即可，布局空间会自动同步，父容器滚动尺寸也会同步更新。
• 如果必须使用 transform 实现缩放，可通过负margin抵消多余的布局占位：你的场景中子元素缩放后视觉尺寸为100*100px，相比原始尺寸少了100px的宽高，给子元素添加 margin: -50px; 即可抵消上下左右的多余占位，父容器的滚动尺寸会自动匹配视觉大小。

动态适配方案（适合缩放比例可变的场景）

给子元素外层套一层空的包装div，每次缩放时：

1. 获取子元素原始宽高，乘以当前缩放比例得到视觉渲染尺寸
2. 将包装div的宽高设置为对应的视觉渲染尺寸
3. 仅在包装div内部对子元素应用transform缩放

父容器会基于包装div的尺寸计算滚动范围，完全和视觉效果同步。

内容的提问来源于stack exchange，提问作者Kelly