Question

我遇到了使用css overflow来自动隐藏垂直滚动条的问题。我在一些文章中读到使用css hover伪类来实现这种行为，好的是我在某种程度上是成功的。

我使用'scroll'和'auto'作为overflow-y属性。使用滚动它就像一个魅力，但是“滚动”问题就是即使不需要显示滚动条，它也是可见的，我觉得'auto'非常好。

但是再次使用'auto'问题是右侧有一个16px（我假设）的差距。可能是滚动条的宽度。我想要全宽。我用背景来解释我的问题。

div.autoscroll {
    height: 200px;
    width: 400px;
    overflow: hidden;
    border: 1px solid #444;
    margin: 3em;
}

div.autoscroll:hover {
    /* overflow-y: scroll; */
    overflow-y: auto;
}

感谢任何帮助。

Answer 1

这实际上对我来说似乎是一个浏览器错误，但如果你在悬停时添加padding-right: 1px，它似乎就像你想要的那样。

div.myautoscroll:hover {
     overflow: auto;
     padding-right: 1px;
}

http://jsfiddle.net/ExplosionPIlls/9scJE/1/

Answer 2

您应该使用填充补偿滚动条。

div.autoscroll:hover {
    /* overflow-y: scroll; */
    overflow-y: scroll;
padding-right: 16px;

}

然而，最好使用javascript进行此操作，因为滚动条宽度在浏览器之间可能略有不同。我成功地使用了这个解决方案：How to calculate the width of the scroll bar?

Answer 3

::-webkit-scrollbar{
     opacity:0;
     background: transparent;
}
::-webkit-scrollbar:hover{
     opacity: 1;
}
.container:hover::-webkit-scrollbar-thumb{
     background: red;
}

Answer 4

将鼠标悬停在div上时，您可以添加width: 100%;：

 div.myautoscroll:hover {
     overflow: auto;
     width: 100%;
 }

的 Working Demo

使用css溢出自动隐藏垂直滚动条

4 个答案: