23

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

对于overflow-y 属性，我同时使用了'scroll' 和'auto'。使用滚动它就像一个魅力，但使用“滚动”的问题是即使不需要显示滚动条，它也是可见的，我觉得“自动”做得很好。

但是再次使用“自动”，问题是右侧有一个 16 像素（我假设）的间隙。可能是滚动条的宽度。我想要全宽。我用背景来解释我的问题。

这是小提琴。http://jsfiddle.net/9scJE/

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

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

感谢任何帮助。

4

4 回答 4

23

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

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

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

于 2013-04-10T05:45:57.067 回答
2

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

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

}

但是最好使用 javascript 来执行此操作，因为滚动条宽度在浏览器之间可能略有不同。我已经成功使用了这个解决方案：如何计算滚动条的宽度？

于 2013-04-10T05:47:37.653 回答
1

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

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

Working Demo

于 2013-04-10T05:44:02.270 回答
1 
::-webkit-scrollbar{
     opacity:0;
     background: transparent;
}
::-webkit-scrollbar:hover{
     opacity: 1;
}
.container:hover::-webkit-scrollbar-thumb{
     background: red;
}
于 2020-03-03T12:37:11.473 回答