HTML/CSS - 滾動條隱藏但未摺疊

Question

我想在div 上顯示垂直滾動條（如果需要的話），只有在懸停 div時才顯示。

這是通過

.my-div-class { 
    overflow: hidden; 
} 

.my-div-class:hover { 
    overflow-y: auto; 
} 

實現然而，當滾動條將出現（在hover'ing）所有該div移動和包裹物，這是不希望裏面的內容。我是否有一個選項來爲垂直滾動條始終「預訂」空間，以便我的div內容總是被包裝（儘管滾動條本身是透明的）。在懸停我只是使該滾動條可見。

這應該是跨瀏覽器支持的。

Answer 1

您是否嘗試添加正確的填充並將其移除到鼠標上？

事情是這樣的：

.my-div-class { 
 
    overflow: hidden; 
 
    width:200px; 
 
    height:200px; 
 
    padding-right:18px; 
 
    box-sizing:border-box; 
 
    border:1px solid #333; 
 
} 
 

 
.my-div-class:hover { 
 
    overflow-y: auto; 
 
    padding-right:0; 
 
}

<div class="my-div-class"> 
 
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
 
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
 
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
 
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
 
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
 
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
</div>

Answer 2

一個second comment通過Cory J.幫助我實現所需的知識。