Question

我想在div 上显示一个垂直滚动条（如果需要），只有在悬停＆＃39> 该div时才会显示。

这是通过

实现的

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

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

然而，当滚动条出现时（在悬停时），该div内的所有内容都会移动和包裹，这是不希望的。我可以预先选择＆＃34;预订＆＃34;始终为垂直滚动条的空间，以便我的div内容始终被包装（虽然滚动条本身是透明的）。并且在悬停时我只是让滚动条可见。

这应该是跨浏览器支持的。

Answer 1

您是否尝试添加正确的填充并将鼠标移除？

这样的事情：

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 2

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

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

2 个答案: