CSS变换：为什么滚动条在内部元素较小时可见？

Question

请参阅https://codepen.io/anon/pen/VzmVNe

.wrapper { 
    width: 200px; height: 200px; padding: 10px; 
    border: 1px solid #888; overflow: auto; 
} 
.scale { 
    width: 400px; height: 300px; 
    background-color: red; 
    transform: scale(0.4); 
    transform-origin: 0 0; transition: all 0.5s ease-in-out; 
} 
.scale:hover { 
    transform: scale(4); 
} 

由于改造后的内格在视觉上比它的包装小，我倒觉得滚动条将不可见。

此外，它在Chrome和IE之间的行为有所不同。在IE11中，x-& y滚动条都可见，但在Chrome中只有y滚动条。

将鼠标悬停在内部div上按预期工作。

我想实现的目标：IE中没有可见的滚动条& Chrome直到您将鼠标悬停在内部div上。可能吗？谢谢。

Answer 1

速战速决可能是：

.scale { 
    width: 400px; height: 300px; 
    background-color: red; 
    transform: scale(0.4); 
    transform-origin: 0 0; transition: all 0.5s ease-in-out; 
    overflow: hidden; 

}

.scale:hover { 
    transform: scale(4); 
    overflow: scroll; 
} 

Answer 2

您的初始状态有一个垂直滚动条的原因是因为你内心DIV（.scale）具有比更大的高度外DIV（.wrapper）：

.wrapper { 
    width: 200px; 
    height: 200px; /* <---- */ 
    padding: 10px; 
    border: 1px solid #888; overflow: auto; 
} 
.scale { 
    width: 400px; 
    height: 300px; /* <---- */ 
    background-color: red; 
    transform: scale(0.4); 
    transform-origin: 0 0; transition: all 0.5s ease-in-out; 
} 

为了避免在初始的滚动条，调整内DIV的东西< =外部DIV。

注意 - 当用户尝试抓取和滚动内容时，我认为您会遇到更多困难，因为滚动条不是内部DIV的一部分，因此：悬停效果将被释放并且缩放将返回到原来的，缩小的尺寸。