HTML/CSS -滚动条隐藏，但不折叠

Question

我想在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.的第二个评论帮助我实现了要求。