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); 
}

因为转换后内部div 在视觉上比其包装器小，所以我认为滚动条将不可见。

此外，它在Chrome和IE之间的行为不同。 在IE11中，x-和y-scrollbar都是可见的，但在Chrome中只有y-scrollbar是可见的。

将鼠标悬停在内部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 的一部分，因此 ：hover 效果将脱离，缩放将恢复到原来的缩小大小。