Html 如何显示负转换元素的滚动条（使用CSS转换）

我想显示一个具有平移和缩放功能的图像。我使用CSS

transform

与

scale

和

transform

一起使用。在某些情况下，我希望使用滚动条向用户显示图像的实际缩放位置

因此，我应用了

溢出：auto到父元素。但是，似乎只有当转换后的图像位于右侧（具有正平移）时才会显示滚动条，而不是在左侧（具有负值）时才会显示滚动条

请参见下面的简单示例。在第一个
div
中，我想显示第二个滚动条（位置除外）


.wrapper{
宽度：300px；
高度：200px；
边框：1px纯黑；
溢出：自动；
}
.wrapper.left>img{
转换：转换（-20px，-20px）；
}
.wrapper.right>img{
转换：转换（270px，170px）；
}
CSS转换从堆叠上下文中删除元素。简言之，您需要使仍然是堆叠顺序一部分的元素内容大于溢出容器

因此，您需要向容器元素添加一个等于转换量的负边距，然后填充以恢复正常（未转换）内容

说了这么多在浏览器中，如果超过零，您实际上无法向上或向左滚动。因此，您必须使滚动从一个非零的正数开始。例如：滚动条的启动就像内容被滚动到100%一样。
OK，感谢粗体字的精确性。这似乎有点奇怪，但接下来我必须考虑另一个UI。