HTML / CSS - 滚动条隐藏，但没有折叠[重复]

Question

我想在 div 仅在悬停该 div 时在 div 上显示垂直滚动条（如果需要）。

这是通过

实现的

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

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

但是，当滚动条出现时（悬停时），该 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

Cory J. 的 second comment 帮助我实现了所需。