<分区>
<分区>
我想在一个 div 上显示一个垂直滚动条(如果需要的话)仅当鼠标悬停在该 div 上时。
这是通过
实现的.my-div-class {
overflow: hidden;
}
.my-div-class:hover {
overflow-y: auto;
}
然而，当滚动条出现时(在悬停时)，该 div 内的所有内容都会移动和换行，这是不希望的。我是否可以选择始终为垂直滚动条“预先预订”空间，以便始终包裹我的 div 内容(尽管滚动条本身是透明的)。在悬停时，我只是让滚动条可见。
这应该是跨浏览器支持的。
最佳答案
您是否尝试添加右填充并在鼠标悬停时将其移除？
像这样:
.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>关于HTML/CSS - 滚动条隐藏，但不折叠，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39347906/