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.帮助我实现所需的知识。