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的一部分，因此：懸停效果將被釋放並且縮放將返回到原來的，縮小的尺寸。