Javascript CSS转换比例从包装器中切断内容

我有一个高度和宽度固定的包装容器，设置为

overflow:scroll

。在里面，我有一堆其他的内容，可以通过滚动来访问

我还有一个放大和缩小按钮。这些按钮将变换：缩放（x）应用于内容，看起来效果不错。我已经通过检查包装器的

scrollTop

值，将

transform origin

设置为包装器中可见内容的中心

然而，我的问题是，当内容被放大时，它会被包装器（预期）切断，但通过滚动无法访问（意外）

我已经创建了一个关于我的问题的示例，并将在此处发布代码：

让缩放=1；
功能fnZoom（缩放修改器）{
缩放+=缩放修改器；
让scrollTop=document.getElementById（“a”）.scrollTop；
document.getElementById（“b”）.style.transformOrigin=`150px${scrollTop+100}px`；
document.getElementById（“b”）.style.transform=`scale（${zoom}）`；
}

#a{
保证金：0自动；
溢出：滚动；
宽度：300px；
高度：200px；
边框：3倍纯红；
溢出：滚动；
}
#b{
变换：比例（1）；
变换原点：0；
宽度：300px；
高度：20000像素；
背景颜色：浅黄色；
}
#c{
边缘顶部：100px；
宽度：100%；
背景色：天蓝色；
}

试验

中间的

放大
缩小

这完全是意料之中的事。

transform

完全是可视的……它实际上并没有改变元素的大小。@Paulie_D是否有另一个属性可以实现转换在视觉上和实际上改变元素的功能？只是实际改变元素的尺寸。这完全是意料之中的。

transform

完全是可视的……它实际上并没有改变元素的大小。@Paulie_D是否有另一个属性可以实现转换在视觉上和实际上改变元素的功能？只是实际改变元素的尺寸。